初始化validation验证插件
$(document).ready(function() {
$("#formID").validationEngine() ; //formID是你要验证的表单ID
})
如果需要更改验证规则和添加ajax验证函数之类的需要在汉化js中进行更改。
所有的参数表格都是摘抄于http://www.im486.net/Validation_Engine.html自己也收集了一些感觉不够完整,看到该网站上面收集到的参数比较完整,所以摘抄了下来。
options 参数
validationEventTrigger | "blur" | 触发验证的事件,支持事件可参考 jQuery 的事件说明。 |
scroll | true | 屏幕自动滚动到第一个未通过验证的位置 |
focusFirstField | true | 验证未通过时,第一个未通过的控件是否设置为焦点 |
promptPosition | "topRight" | 验证提示信息的位置,可设置为:"topRight", "bottomLeft", "centerRight", "bottomRight" |
autoPositionUpdate | false | 是否自动调整提示层的位置 |
bindMethod | "bind" | 验证事件的绑定方式,可设置为:bind, live |
binded | false | 是否已经绑定其他事件,设为 true 将不进行验证。 |
inlineAjax | false | |
ajaxFormValidation | false | 使用 Ajax 验证表单 |
ajaxFormValidationURL | false | 设置 Ajax 验证的 URL,默认使用 form 的 action 属性 |
ajaxValidCache | {} | |
onAjaxFormComplete | $.noop | 表单提交,Ajax 验证完成后的行为(Function) |
onBeforeAjaxFormValidation | $.noop | 表单提交验证规则通过后,Ajax 验证之前的行为(Function) |
onValidationComplete | false | 表单提交验证完成时的行为(Function)可以得到两个参数:表单元素 和 验证结果(ture or false) |
onSuccess | false | 实时验证所有项目都通过时,发生的行为(Function) |
onFailure | false | 实时验证有未通过项目时,发生的行为(Function)PS:onSuccess 和 onFailure 在禁用实时验证时无效。 |
isOverflown | false | 表单是否在溢出滚动的元素内(即外部元素设置了 overflow:scroll) |
overflownDIV | "" | 设置了溢出滚动的元素,格式为 jQuery 的选择器。 |
showArrow | true | |
isError | false | |
InvalidFields | [] | |
验证规则
Validation验证是通过class的属性进行验证,基本格式如下
<input value="请输入您的姓名" class="validate[required,custom[noSpecialCaracters],length[0,20],ajax[ajaxUserName]]" type="text" name="user" id="user" />
所有的验证规则写在validate[]内,有多种验证,用逗号隔开,
常用的验证参数
名称 | 示例 | 说明 |
---|---|---|
required | validate[required] | 必填项 |
optional | validate[optional] | 可选项。若不输入,不要求必填,若有输入,则验证其是否符合要求。 |
dateRange[name] | validate[dateRange[grp1]] | 验证日期范围 |
dateTimeRange[name] | validate[dateTimeRange[grp1]] | 验证日期及时间范围 |
minSize[int] | validate[minSize[6]] | 最少输入字符数 |
maxSize[int] | validate[maxSize[20]] | 最多输入字符数 |
groupRequired[name] | validate[groupRequired[grp2]] | 群组中至少输入一项 |
min[int] | validate[min[1]] | 最小值(数值的最小值) |
max[int] | validate[max[9999]] | 最大值(数值的最大值) |
past[date] | validate[past[2012/12/20]] | 日期必需在 date 或 date 的将来。格式为 YYYY/MM/DD、YYYY/M/D、YYYY-MM-DD、YYYY-M-D 或 now。 |
future[date] | validate[future[now]] | 日期必须在 data 或 date 的过去。 |
maxCheckbox[int] | validate[maxCheckbox[2]] | 最多选取的项目数(用于Checkbox) |
minCheckbox | validate[minCheckbox[2]] | 最少选取的项目数(用于Checkbox) |
equals | validate[equals[id]] | 当前控件值需与 id 这个控件的值相同 |
phone | validate[custom[phone]] | 验证电话号码 |
validate[custom[email]] | 验证 Email 地址 | |
integer | validate[custom[integer]] | 验证整数 |
number | validate[custom[number]] | 验证数字 |
date | validate[custom[date]] | 验证日期 |
dateFormat | validate[custom[dateFormat]] | 验证日期格式 |
dateTimeFormat | validate[custom[dateTimeFormat]] | 验证日期及时间格式,格式为:YYYY/MM/DD hh:mm:ss AM|PM |
ipv4 | validate[custom[ipv4]] | 验证 ipv4 地址 |
url | validate[custom[url]] | 验证 url 地址,需以 http://、https:// 或 ftp:// 开头 |
onlyNumberSp | validate[custom[onlyNumberSp]] | 只接受填数字和空格 |
onlyLetterSp | validate[custom[onlyLetterSp]] | 只接受填英文字母(大小写)和单引号(') |
onlyLetterNumber | validate[custom[onlyLetterNumber]] | 只接受数字和英文字母 |
ajax | validate[ajax[ajaxUserCallPhp]] | 在验证规则中自定义 "ajaxUserCallPhp":{ "url":"phpajax/ajaxValidateFieldUser.php", "extraData":"name=eric", "alertTextOk":"* 此帐号名称可以使用", "alertText":"* 此名称已被其他人使用", "alertTextLoad":"* 正在确认帐号名称是否有其他人使用,请稍等。" } |
funcCall | validate[funcCall[functionName]] | 调用外部函数 |
Validation Engine的API 方法参数
名称 | 示例 | 说明 |
---|---|---|
attach | $("#form_id").validationEngine("attach"); | 注册表单验证事件 |
detach | $("#form_id").validationEngine("detach"); | 取消注册表单验证事件 |
validate | alert($("#form_id").validationEngine("validate")); | 验证表单,返回结果 true 或 false |
validateField | alert($("#form_id").validationEngine("validateField","#element_id")); | 验证单个控件,返回结果 true 或 false |
showPrompt | $("#element_id").validationEngine("showPrompt","提示内容","load"); | 在该元素上创建一个提示内容,3 种状态:"pass", "error", "load" |
hidePrompt | $("#element_id").validationEngine("hidePrompt"); | 隐藏该元素的提示内容 |
hide | $("#form_id").validationEngine("hide"); | 关闭表单中的提示 |
hideAll | $("#form_id").validationEngine("hideAll"); | 关闭页面上的所有提示 |
updatePromptsPosition | $("#form_id").validationEngine("updatePromptsPosition") | 更新提示层的位置 |
错误信息显示属性
data-errormessage-value-missing(为空的时候提示信息)
required
groupRequired
condRequired
data-errormessage-type-mismatch
past
future
dateRange
dateTimeRange
data-errormessage-pattern-mismatch
creditCard
equals
data-errormessage-range-underflow
minSize
min
minCheckbox
data-errormessage-range-overflow
maxSize
max
maxCheckbox
data-errormessage-custom-error
custom
ajax
funcCall
你还可以在点击提交按钮后才触发验证。
$("#formID").validationEngine({
inlineValidation: false,
success : false,
failure : function(){callFailFunction()}
})
默认的是在鼠标失去焦点后才开始验证,也就是绑定的是blur事件,那如何改变呢?看下面的配置。
$("#formID").validationEngine({
validationEventTriggers:"keyup blur", //will validate on keyup and blur
success : false,
failure : function(){callFailFunction()}
})
validationEventTriggers属性就是修改绑定事件,上面是增加了个keyup,也就是键盘按键起来就触发验证。
修改提示层的位置
$("#formID").validationEngine({
promptPosition: "topRight", // OPENNING BOX POSITION, IMPLEMENTED: topLeft, topRight, bottomLeft, centerRight, bottomRight
success : false,
failure : function(){
})
promptPosition就是控制位置,有5种模式:topLeft, topRight, bottomLeft, centerRight, bottomRight
ajax验证模式
$("#formID").validationEngine({
ajaxSubmit: true,
ajaxSubmitFile: "ajaxSubmit.php",
ajaxSubmitMessage: "Thank you, we received your inscription!",
ajaxSubmitExtraData: "securityCode=38709238423&name=john",
success : false,
failure : function(){}
})
这几个参数很好理解。
ajaxSubmit: true, 提交表单使用ajax提交
ajaxSubmitFile: “ajaxSubmit.php”, 后台脚本
ajaxSubmitMessage 成功后显示的信息
ajaxSubmitExtraData 参数
这里需要对后台脚本返回的数据进行下说明:
返回的数据格式是json。
出现一个错误,产生一个数组,如下:$arrayError[0][0] = "#email"; // FIELDID
$arrayError[0][1] = "Your email do not match.. whatever it need to match"; // TEXT ERROR
$arrayError[0][2] = "error"; // BOX COLOR
如何使用钩子?
Validation-Engine中的钩子是用来做啥?我们来看一个典型的使用场景:当你的表单字段存在错误时,你希望表单提交前,在表单头部打印出一行“你的表单存在错误,请修改!”。
也就是说Validation-Engine中的钩子其实可以理解为自定义事件。
具体来看个demo:http://www.position-relative.net/creation/formValidator/demos/demoHooks.html。$("#formID").bind("jqv.form.result", function(event , errorFound){
if(errorFound) $("#hookError").append("There is some problems with your form");
})
监听jqv.form.result事件,在提交表单前触发。
errorFound是错误标识符,当为false时,表示表单存在错误。Validation-Engine目前支持的钩子(自定义事件)
jqv.form.validating:在表单开始验证前
jqv.field.result(event, field, errorFound, prompText) :一个表单字段验证后触发
jqv.form.result(event, errorFound) : 表单验证后触发