Jquery插件——Validation
引入——如何开始
引入js文件
<script src="jquery.js"></script> <script src="jquery.validate-1.13.1.js"></script>编写html页面，这里仅以用户名、密码为例
<body> <form id="demoForm"> <fieldset> <legend>用户登录</legend> <p> <label for="username">用户名</label> <input type="text" id="username" name="username"> </p> <p> <label for="password">密码</label> <input type="text" id="password" name="password"> </p> </fieldset> </form> </body>编写script脚
$(document).ready(function(){ $("#demoForm").validate({ rules:{ username:{ required:true,// 是否必填 minlength:2, // 最小长度 maxlength:10 // 最大长度 }, password:{ required:true, minlength:2, maxlength:16 } } }); });测试
关于提示显示红色等样式问题，可以根据需要添加，这里不再赘述改变提示信息为中文
注意：规则中定义的username是对应input的name属性
基本API
两个重要概念
method： 验证方法，指的是验证的逻辑，如email方法，检查输入的文本是否符合email的规则 rule： 验证规则，指的是元素和验证方法的关联。validate方法
核心方法，定义了基本的校验规则和一些有用的配置项 例如：debug，如果该参数为true，那么表单不会提交，只进行检查，调试时十分方便
基本的验证方法
其中remote远程校验用法如下：
表示发送地址为remote.json的get请求，查看chrome的debug可以看到：
remote主要用于校验名称是否存在等需要查询数据库的校验
当然remote不仅仅是get请求，也可以发送post请求
通过debug查看是post请求
其他基本方法讲解
rangelength:[2,10]，长度范围在2到10位之间 email:true，校验email格式 url:true，校验是否是合法的url。注意，必须带有http才是合法的url date:true，日期需要可以被Date.parse函数解析才是有效日期， 然而符合格式的日期是非常多的 dateISO:true，iso格式必须是2011/08/22或者2011-08-22的格式 number:true，校验数字 digits:true，校验整数 equalTo:"#password"，属性后面的值是一个选择器，用来校验是否与另一个元素相等别的很简单，这里不讲了
高级API
<1> valid()方法：校验表单或某些元素是否有效
创建表单校验的按钮<p> <button id="check">检查表单</button> </p>为按钮添加事件，这里valid()方法会校验该表单是否有效$("#check").click(function(){ alert($("#demoForm").valid()?"填写正确":"填写错误"); });效果图
<2>rules
rules() 获取表单元素的校验规则 rules("add",rules)向表单元素增加校验规则 reles("remove",rules)删除表单元素校验规则<3>Validator对象
$("#demoForm").validate()返回validator对象
addClassRules(name,rules)：给一类组合添加验证$.validator.addClassRules({ txt:{ required:true, minlength:5 } });<4>validate()方法配置项
如下，展示了submitHandler和invalidHandler的用法
$("#demoForm").validate({
rules:{
username:{
required:true,
minlength:2,
maxlength:10
},
password:{
required:true,
minlength:2,
maxlength:16,
}
},
messages:{
username:{
required:"必须填写用户名",
minlength:"用户名最小2位",
maxlength:"用户名最大10位"
},
password:{
required:"必须填写密码",
minlength:"密码最小2位",
maxlength:"密码最大16位"
}
},
submitHandler:function(form){
console.log($(form).serialize());
},
invalidHandler:function(event,validator){
console.log("错误数"+validator.numberOfInvalids());
}
});其中invalidHandler还可以用通过事件触发
$("#demoForm").on("invalid-form",function(event,validator){
console.log("错误数"+validator.numberOfInvalids());
})ignore的用法
invalidHandler:function(event,validator){
console.log("错误数"+validator.numberOfInvalids());
},
ignore:"#username" // 默认不对隐藏的元素校验。
// 注意这里不要写分号，都是逗号结尾的拓展rules
rules在定义要校验的属性的时候，可以选择依赖什么而触发，即前提条件，例如：
username:{
required:{// depends决定什么情况下该校验生效
depends:function(element){ // element代表username元素
return $("#password").is(":filled"); // 只有返回 true的时候，该校验才会启动，
} // 其中:filled是validate自带的过滤器，表示是否被填写
// 这里的意思是 “只有密码被填写，才校验用户名”
},
minlength:2,
maxlength:10
},
password:{
required:true,
minlength:2,
maxlength:16,
}required好理解，因为本身的值就是true，而像 minlength:2这样带参数的属性，怎么使用depends呢？答案如下：
minlength:{ param:2, depends:function(element){ return $("#password").is(":filled"); }
},groups:{
login:"username password"
},
errorPlacement:function(error,element){
error.insertBefore("#info");
},validate()方法其他配置项
submitHandler:function(form){
console.log($(form).serialize());
},
onsubmit:false // 默认是true，当false的时候，提交表单不验证
//与onfocusout,onkeyup,onclick同理，这里不一一解释focusInvalid: // 默认true，即获取第一个框的焦点，设置为false则不回获取焦点
focusCleanup: 同理
errorClass:"wrong", // 当为wrong时，验证错误的时候会给错误信息的label添加wrong的class属性，而不是默认的error了
validClass:"right", // 同理errorContainer:"#info", // errorLabelContainer其实已经显示错误信息了，errorContainer是在显示错误信息的时候仍然需要显示一些其他的提示才存在的
errorLabelContainer:"#info",
errorElement:"li",
wrapper:"ul"
showErrors一般用来自定义错误信息的展示处理
showErrors:function(errorMap,errorList){
console.log(errorMap);
console.log(errorList);
}success:”right” 给验证通过的信息的label标签添加right的class属性
也可以通过方法来设置
success:function(label){
label.addClass("right");
}highlight:function(element,errorClass,validClass){
$(element).addClass(errorClass).removeClass(validClass);
$(element).fadeOut().fadeIn();
}
:blank 全角空格不是blank
自定义验证方法
$.validator.addMethod("postcode",function(value,element,params){
var postcode = /^[0-9]{6}$/;
return this.optional(element) || (postcode.test(value)); // 后一个判断是根据正则判断，前一个判断保证如果没有填写内容，不做验证
},"请填写正确的邮编！");$.validator.addMethod("postcode",function(value,element,params){
var postcode = /^[0-9]{6}$/;
return this.optional(element) || (postcode.test(value)); // 后一个判断是根据正则判断，前一个判断保证如果没有填写内容，不做验证
},$.validator.format("请填写正确的{0}邮编！"));国际化