1.简介
JQuery-validate是基于JQuery的一个JS校验框架。
其中1.1.2依赖与JQuery1.7+
2.使用
1)input组件中通过属性来指定校验类型
--简单校验类型
data-required:必填,支持text,radio,checkbox,select等所有的组件
data-pattern:基于正则表达式的校验
data-trim:校验时是否去除前后空白
data-ignore-case:校验时大小写不敏感,默认为true
data-mask:
data-prepare:
--复杂校验类型
data-conditional:通过调用validate方法中的conditionnal参数中指定的方法进行校验,多个方法用空格分隔,每个方法需返回boolean类型的值。
data-validate:调用扩展的校验规则。
2)通过向jQuery.fn.validate(options)方法中传递options参数来设置校验特性
--普通参数
conditional:定义data-conditional的使用方法
filter:需要校验组件的选择器
nameSpace:
onBlur:失去焦点时触发该组件的校验,默认为false
onChange:值改变时触发该组件的校验,默认为false
onKeyup:keyup事件发生时触发该组件的校验,默认为false
onSubmit:表单提交时触发该表单的校验,默认为true
prepare:
sendForm:表单校验通过后是否自动提交,默认为true
waiAria:
--回调方法
valid:表单校验通过时调用,方法中this为该表单,提供两个参数event和options
invalid:表单失败通过时调用,方法中this为该表单,提供两个参数event和options
eachField:每个控件校验时调用,方法中this为该控件,提供三个参数event,status和options
eachInvalidField:每个控件校验失败时调用,方法中this为该控件,提供三个参数event,status和options
eachValidField:每个控件校验成功时调用,方法中this为该控件,提供三个参数event,status和options
3.错误描述
<form> <input type="text" data-describedby="messages" data-description="test" /> <span id="messages"></span> </form> $('form').validate({ description : { test : { required : '<div class="error">Required</div>', pattern : '<div class="error">Pattern</div>', conditional : '<div class="error">Conditional</div>', valid : '<div class="success">Valid</div>' } } });
4.例子
1)简单校验类型
<html> <head> <meta charset="UTF-8" /> <title>Simple</title> <script src="jquery-2.1.1.js"></script> <script src="jquery-validate.min.js"></script> <script language="javascript"> <!-- $(function(){ $("#simple").validate({ onBlur: true, sendForm: false, valid: function() { alert("ajax request"); }, description: { name: { required: "请输入用户名", pattern: "用户名仅能包含a-z的英文字母" } } }); }); --> </script> </head> <body> <form id="simple"> <div> <label> 用户名: <input id="name" data-required data-trim data-ignore-case="false" data-pattern="^[a-z]+$" data-describedby="messages" data-description="name"/> <span id="messages"></span> </label> </div> </form> </body> </html>
2)data-conditional
<html> <head> <meta charset="UTF-8" /> <title>data-conditional</title> <script src="jquery-2.1.1.js"></script> <script src="jquery-validate.min.js"></script> <script language="javascript"> <!-- $(function(){ $("#simple").validate({ onBlur: true, sendForm: false, valid: function() { alert("ajax request"); }, conditional: { valid_name: function() { var name = $.trim($(this).val()); if (name == "") { return false; } if (!name.match(/^[a-z]+$/)) { return false; } return true; } }, description: { name: { conditional: "用户名不能为空,并且仅能包含a-z的字母" } } }); }); --> </script> </head> <body> <form id="simple"> <div> <label> 用户名: <input id="name" data-conditional="valid_name" data-describedby="messages" data-description="name"/> <span id="messages"></span> </label> </div> </form> </body> </html>
3)data-validate
<html> <head> <meta charset="UTF-8" /> <title>data-conditional</title> <script src="jquery-2.1.1.js"></script> <script src="jquery-validate.min.js"></script> <script language="javascript"> <!-- $(function(){ $("#simple").validate({ onBlur: true, sendForm: false, valid: function() { alert("ajax request"); }, description: { name: { valid: "校验通过", required: "请输入用户名", pattern: "用户名仅能包含a-z的英文字母" } } }); $.validateExtend({ valid_name: { required: true, pattern: /^[a-z]+$/ } }); }); --> </script> </head> <body> <form id="simple"> <div> <label> 用户名: <input id="name" data-validate="valid_name" data-describedby="messages" data-description="name"/> <span id="messages"></span> </label> </div> </form> </body> </html>
5.参考文档