用jquery实现表单验证_jquery验证插件

<link rel="stylesheet" href="css/validationEngine.jquery.css">

<script src="js/jquery.js"></script> 
<script src="js/jquery.validationEngine-zh_CN.js"></script> 
<script src="js/jquery.validationEngine.js"></script> 
<!-- jquery.validationEngine-zh_CN.js 为配置文件，可根据需求自行调整或增加，也可以更换为其他语言配置文件 --> 

<!-- ID 须设置在 form 标签中 --> 
<form id="form_id" ...> 
... 
</form> 

<!--  验证规则默认使用 class 属性  validate[required] 表示该项必须填写  --> 
<input type="text" class="validate[required]"> 
<input type="checkbox" class="validate[required]"> 
<select class="validate[required]"></select> <!--默认的选项的value须为空--如下--><select class="validate[required]"><option value="">请选择</option></select>
 <textarea class="validate[required]"></textarea>  
设置验证
// 直接调用 
$('#form_id').validationEngine(); 
 
// 自定义参数调用 
$('#form_id').validationEngine('attach', { 
    
  promptPosition: 'centerRight', 
  scroll: false 
}); 

支持链式操作
$('#form_id').validationEngine().css({ 
   border:'2px solid #000'});
二、验证类型

注：验证规则均写在 validate[] 中，如有多条规则，用英文逗号(,)分割。
例：validate[required,minSize[6],custom[onlyLetterNumber]]



名称
示例
说明




required
validate[required]
表示必填项


groupRequired[string]
validate[groupRequired[grp]]
在验证组为 grp 的群组，中至少输入或选择一项


condRequired[string]
validate[condRequired[ids]]
当 ids 的某个控件不为空时，那么该控件也为必填项。 
可以依赖多项，如：validate[condRequired[id1,id2]][Demo]



minSize[int]
validate[minSize[6]]
最少输入字符数


maxSize[int]
validate[maxSize[20]]
最多输入字符数


min[int]
validate[min[1]]
最小值（该项为数字的最小值，注意与 minSize 的区分）


max[int]
validate[max[9999]]
最大值（该项为数字的最大值，注意与 maxSize 的区分）


minCheckbox[int]
validate[minCheckbox[2]]
最少选取的项目数（用于 Checkbox）


maxCheckbox[int]
validate[maxCheckbox[2]]
最多选取的项目数（用于 Checkbox）


date[string]
validate[custom[date]]
验证日期，格式为 YYYY/MM/DD、YYYY/M/D、YYYY-MM-DD、YYYY-M-D


dateFormat[string]
validate[custom[dateFormat]]
验证日期格式，格式为 YYYY/MM/DD、YYYY/M/D、YYYY-MM-DD、YYYY-M-D


dateTimeFormat[string]
validate[custom[dateTimeFormat]]
验证日期及时间格式，格式为：YYYY/MM/DD hh:mm:ss AM|PM


dateRange[string]
validate[dateRange[grp1]]
验证 grp1 的值是否符合日期范围（开始日期与结束日期） 
根据控件的前后位置，如果当前控件在 grp1 元素之后，输入的日期不能是 grp1 日期的过去。
如果当前控件在 grp1 控件之前，输入的日期不能是 grp1 日期的未来。[Demo]



dateTimeRange[string]
validate[dateTimeRange[grp1]]
验证日期及时间范围，增加了时间的对比，其他的和 dateRange 一样。


past[string]
validate[past[2012/12/20]]
日期必需是 date 或 date 的过去。date 格式可写作 YYYY/MM/DD、YYYY/M/D、YYYY-MM-DD、YYYY-M-D 或 now


future[string]
validate[future[now]]
日期必须是 data 或 date 的未来。date 格式可写作 YYYY/MM/DD、YYYY/M/D、YYYY-MM-DD、YYYY-M-D 或 now


equals[string]
validate[equals[id]]
当前控件的值需与控件 id 的值相同


number
validate[custom[number]]
验证数字


integer
validate[custom[integer]]
验证整数


phone
validate[custom[phone]]
验证电话号码


email
validate[custom[email]]
验证 E-mail 地址


url
validate[custom[url]]
验证 url 地址，需以 http://、https:// 或 ftp:// 开头


ipv4
validate[custom[ipv4]]
验证 ipv4 地址


onlyNumberSp
validate[custom[onlyNumberSp]]
只接受填数字和空格


onlyLetterSp
validate[custom[onlyLetterSp]]
只接受填英文字母、单引号（’）和空格


onlyLetterNumber
validate[custom[onlyLetterNumber]]
只接受数字和英文字母


custom[自定义规则]
validate[custom[ruleName]]
自定义规则验证 
'ruleName': { 
             'regex': RegExp, /* 正则表达式，如果正则能匹配内容表示通过 */    'alertText': '验证不通过时的提示信息'  }



ajax
validate[ajax[ajaxName]]
自定义 ajax 验证 
'ajaxName': { 
         
  'url': 'phpajax/ajaxValidateFieldUser.php', /* 验证程序地址 */ 
  'extraData': 'name=eric', /* 额外参数 */ 
  'alertTextOk': '验证通过时的提示信息', 
  'alertText': '验证不通过时的提示信息', 
  'alertTextLoad': '正在验证时的提示信息' 
} 
/*   * 例：   * <input type="text" id="email" class="validate[ajax[ajaxName]]">   * 假设填写的值为：ciaoca@gmail.com   * extraData 设置为：'type=register&verify=abcd'   * 提交到后端的 url 为：phpajax/ajaxValidateFieldUser.php?email=ciaoca@gmail.com&type=register&verify=abcd   */
传输方式：get
传递参数：”fieldId=” + field.attr(“id”) + “&fieldValue=” + field.val()
额外参数：extraData 可以设置为字符串或对象，会在参数结尾追加 “&extraData”
返回数据格式：json
返回数据内容：[String,Boolean]
第一个值类型为 String，是接收到 fieldId 的值；
第二个值类型为 Boolean，验证通过返回 true，不通过返回 false
具体请参考  [Demo]



funcCall
validate[funcCall[functionName]]
调用外部函数验证 
functionName(field, rules, i, options)



Ciaoca 增强版增加验证规则：



名称
示例
说明




chinese
validate[custom[chinese]]
只接受中文汉字


chinaId
validate[custom[chinaId]]
验证身份证号码（仅支持 18 位的身份证号码）


chinaIdLoose
validate[custom[chinaIdLoose]]
验证身份证号码（支持 15 及 18 位的身份证号码）


chinaZip
validate[custom[chinaZip]]
验证邮政编码


qq
validate[custom[qq]]
验证 QQ 号码



三、参数说明



名称
默认值
说明




validationEventTrigger
‘blur’
触发验证的事件，支持事件可参考 jQuery 的事件说明。 
PS：如果希望只在表单提交时验证，可以设置为空。或者设置参数 binded:false



binded
true
是否绑定即时验证


scroll
true
屏幕自动滚动到第一个验证不通过的位置。


focusFirstField
true
验证未通过时，是否给第一个不通过的控件获取焦点。


validateNonVisibleFields
false
是否验证不可见的元素（如 type=”hidden” 的输入框，或多个输入控件在选项卡切换中）


showPrompts
true
是否显示提示信息


showArrow
true
是否显示提示信息的箭头


promptPosition
‘topRight’

提示信息的位置，可设置为：’topRight’, ‘topLeft’, ‘bottomRight’, ‘bottomLeft’, ‘centerRight’, ‘centerLeft’, ‘inline’
可设置更具体的位置，格式为：”方向: X偏移值, Y偏移值”。如：bottomLeft: -20, 5



autoPositionUpdate
false
是否自动调整提示层的位置


autoHidePrompt
false
是否自动隐藏提示信息


autoHideDelay
100000
自动隐藏提示信息的延迟时间 (ms)


fadeDuration
0.3
隐藏提示信息淡出的时间


addPromptClass
”
给提示信息增加 class 
Ciaoca 增强版中，增加样式如下：
‘formError-noArrow’ — 无箭头样式
‘formError-text’ — 纯文字样式
‘formError-small’ — 精简版样式
‘formError-white’ — 白色版样式
可以叠加使用，如：addPromptClass: 'formError-noArrow formError-small'



custom_error_messages
{}
自定义错误信息内容  [Demo]


maxErrorsPerField
false
单个元素显示错误提示的最大数量，值设为数值。默认 false 表示不限制。


showOneMessage
false
是否只显示一个提示信息


doNotShowAllErrosOnSubmit
false
在提交表单时不显示所有的错误信息（建议使用参数 showOneMessage 替代）


addSuccessCssClassToField
”
验证通过时，给控件增加 class，当再次验证失败时，会去除。


addFailureCssClassToField
”
验证失败时，给控件增加 class，当再次验证通过时，会去除。


prettySelect
false
是否使用了美化过的 select 选择控件  [Demo]


onFieldSuccess
false
控件验证通过时的回调函数 
function(field){}



onFieldFailure
false
控件验证失败时的回调函数 
function(field){}



onSuccess
false
在表单验证结果为通过时的回调函数


onFailure
false
在表单验证结果为失败时的回调函数 
PS：onSuccess 和 onFailure 请参考  [Demo]



onValidationComplete
false
表单提交验证完成时的回调函数  [Demo] 
function(form, valid){}，参数：
form：表单元素
valid：验证结果（ture or false）
PS：使用此方法后，表单即使验证通过也不会进行提交，交给定义的回调函数进行操作。



ajaxFormValidation
false
是否使用 Ajax 提交表单（默认使用 GET 方式发送数据）


ajaxFormValidationURL
false
设置 Ajax 提交的 URL，默认使用 form 的 action 属性


ajaxFormValidationMethod
‘get’
设置 Ajax 提交时，发送数据的方式


onAjaxFormComplete
$.noop
表单提交，Ajax 验证完成后的行为（Function）[Demo] 
function(status, form, json, options){}



onBeforeAjaxFormValidation
$.noop
表单提交验证通过后，Ajax 提交之前的回调函数  [Demo] 
function(form, options){}



ajaxValidCache
{}
 


isError
false
 


InvalidFields
[]
 


isOverflown
false
表单是否在溢出滚动的元素内（即外部元素设置了 overflow:scroll） 
PS：设置为 ture 后，提示内容的插入位置将更改为在验证的控件之前插入；
　　此时需要在控件外层再套一个元素，并设置 class=”inputContainer”



overflownDIV
”
设置了溢出滚动的元素，格式为 jQuery 的选择器。


usePrefix
”
使用 ID 前缀


useSuffix
”
使用 ID 后缀


validateAttribute
‘class’
存放验证规则的属性


bindMethod
‘bind’
 


inlineAjax
false
 



四、HTML5 属性
    属性名称 说明     data-validation-engine  设置验证规则 除了使用 class 设置验证规则外，也可以使用该属性来设置验证规则。    data-validation-placeholder  占位符 当位置为必填的控件验证时，值不能为空，也不能为占位符。    data-prompt-position  自定义提示信息的位置，可设置为：”topRight”, “topLeft”, “bottomRight” “bottomLeft”, “centerRight”, “centerLeft”, “inline” 可设置更具体的位置，格式为：”方向:X偏移值,Y偏移值”。如：data-prompt-position=”bottomLeft:20,5″ PS：偏移值可以为负数    data-prompt-target  载入提示信息的容器，值为元素的 id 仅在 promptPosition 或 data-prompt-position 设为 “inline” 是有效。    错误信息属性（实验的）

属性值与验证规则相对应
<!-- 自定义错误信息属性（实验支持） --> 
<input type="email" name="email" id="email" data-validation-engine="validate[required,custom[email]]" 
  data-errormessage-value-missing="E-mail 不能为空"  
  data-errormessage-custom-error="E-mail 格式应为：someone@nowhere.com"  
  data-errormessage="通用的错误提示信息"> 




属性名称
对应验证规则




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




data-errormessage
通用的错误提示信息



五、API 接口



名称
示例
说明




attach
$(‘#form_id’).validationEngine(‘attach’);
绑定表单验证


detach
$(‘#form_id’).validationEngine(‘detach’);
移除表单验证


validate
alert($(‘#id’).validationEngine(‘validate’));
验证控件或表单，返回结果 true 或 false


showPrompt
$(‘#id’).validationEngine(‘showPrompt’,’提示内容’,’load’);
在该元素上创建一个提示，3 种状态：’pass’, ‘error’, ‘load’


hide
$(‘#id’).validationEngine(‘hide’);
隐藏改元素及元素内的提示


hideAll
$(‘#id’).validationEngine(‘hideAll’);
隐藏页面上的所有提示


updatePromptsPosition
$(‘#form_id’).validationEngine(‘updatePromptsPosition’)
更新提示层的位置



六、自定义事件
插件增加的自定义事件，可参考  [Demo]



名称
示例
说明




jqv.form.validating
$(‘#form_id’).bind(‘jqv.form.validating’, function(event){});
表单验证时


jqv.form.result
$(‘#form_id’).bind(‘jqv.form.result’, function(event, errorFound){});
表单验证完成。返回参数说明： 
errorFound：表单验证不通过（true 或 false）



jqv.field.result
$(‘#field_id’).bind(‘jqv.field.result’, function(event, field, isError, promptText){});
单个控件验证完成。返回参数说明： 
field：控件对象
isError：控件验证不通过（true 或 false）
promptText：提示信息




七、相关信息
  作者网站：   http://www.position-absolute.com/articles/jquery-form-validator-because-form-validation-is-a-mess/    相关文档：   Github   中文文档    授权协议：   MIT  
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。 发布者：全栈程序员栈长，转载请注明出处：https://javaforall.cn/186310.html原文链接：https://javaforall.cn  【正版授权，激活自己账号】：  Jetbrains全家桶Ide使用，1年售后保障，每天仅需1毛    【官方授权 正版激活】：  官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...