一、如何使用
引入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属性
二、提示信息可以默认是中文吗? ——国际化
引入国际化文件
jquery.validate.messages_cn.js
直接引入,然后验证信息不写即可。
已经比较好了,但是对于提示信息,我还希望美化一下,比如成功了有个勾,错了有个差,怎么办?
三、如何美化验证信息
默认验证提示信息的标签是“label”,我们可以改成“em”,然后针对em.error和em.success中添加css样式。再添加成功回调函数,控制是class属性即可
现在这样就比较完美了,但是还有一个很重要的问题,除了常用的验证信息,我可能还有一些奇葩的验证规则,我该怎么扩展呢?
常见验证规则如下
四、怎么添加自己的验证规则
废话不多说,直接上代码
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="js/jquery-1.9.1.min.js"></script>
<!--验证核心插件-->
<script src="js/jquery.validate.js"></script>
<!--国际化,支持中文-->
<script src="js/jquery.validate.messages_cn.js"></script>
<script>
$(function(){
// 添加新的验证规则
$.validator.addMethod(
"formulate", // 验证方法名称
function(value,element,param){ // 验证规则
console.log(element); // element是元素对象
return value == eval(param);
},
"请正确输入数学公式计算后的结果" // 验证提示信息
);
// 使用
$("#myForm").validate({
rules:{
code:{
formulate:"7+9"
}
}
})
})
</script>
</head>
<body>
<form id="myForm">
7+9=<input name="code" type="text">
<input type="submit" value="提交">
</form>
</body>
</html>
建议自定义验证信息单独写在一个js文件中引入。注意它依赖jquery.validate.js,所以要后引入
基本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}邮编!"));
国际化