1. 方法
1.1 使用方式
(1) 将校验规则写到控件中
验证规则直接写在标签里,需js调用 $("#formId").validate();
例如:<input id="cname" minlength="2" maxlength="5" type="text" required> 最小2最大5必填
(2)将校验规则写到 js 代码中
直接在 $("#formId").validate({options}) 中配置校验规则
(3)meta String方式验证
需先引入 jquery.metadata.js,在class属性中配置校验规则,js调用$("#formId").validate({meta: "validate"});
例如:<input class="{validate:{required: true, messages:{required:'提示信息'}}}" type="text" >
1.2 常用方法
方法 | 描述 |
$("#formId").validate({options}) | 配置验证相关配置,返回Validator对象 |
$("#inputId").rules(command, argument); | 无参用于获取元素校验规则 动态添加移除验证,两个参数 第一个参数:方法名,添加?add? ? 移除?remove 第二个参数:rules验证规则,格式:{required:true,messages:{required:"提示信息"}} |
$.validator.addMethod() | 添加自定义验证方法,三个参数: 第一个参数:方法名 第二个参数:验证函数,function(value, element, param)输入值、验证元素、参数 第三个参数:错误信息 |
$.validator.setDefaults({}) | 一个页面有多张表单,设置全局参数 |
$.validate.form() | 验证form返回成功还是失败 |
$.validator.addClassRules(name,rules) | 增加组合验证类型 在一个类里面用多种验证方法里比较有用 |
$.validator.addClassRules(rules) | 增加组合验证类型 在一个类里面用多种验证方法里比较有用,这个是一下子加多个 |
$.validator.format("{n}") | 用参数代替模板中的 {n},参数为 验证方法参数,多个为[] |
1.3 Validator对象方法
方法 | 描述 |
element(element) | 验证单个元素是否验证通过 |
resetForm() | 把前面验证的FORM恢复到验证前原来的状态 |
showErrors(errors) | 显示特定的错误信息 |
form() | 验证form返回成功还是失败 |
1.4 validate方法参数(json属性)
分类 | 参数 | 默认值或类型 | 描述 |
验证规则 | rules | —— | 定义各文本框校验规则,格式 rules:{"文本框name属性值"{校验规则(可配置多个)}} |
messages | —— | 定义各文本框校验错误提示信息,格式 messages:{"文本框name属性值"{校验规则(可配置多个)}} | |
groups | —— | 对一组元素的验证,用一个错误提示 | |
验证的触发方式 | onsubmit | true | 提交时验证。设置为 false 就用其他方法去验证 |
onfocusout | true | 失去焦点时验证(不包括复选框/单选按钮) | |
onkeyup | true | 在 keyup 时验证 | |
onclick | true | 在点击复选框和单选按钮时验证 | |
focusInvalid | true | 提交表单后,未通过验证的表单(第一个或提交之前获得焦点的未通过验证的表单)会获得焦点 | |
focusCleanup | false | 如果是 true 那么当未通过验证的元素获得焦点时,移除错误提示。避免和 focusInvalid 一起用 | |
其他 | debug | false | 表单不会提交,只进行检查 |
ignore | 元素选择器 | 忽略某些元素不验证 | |
meta | validate | 设置meta String方式验证;需引入jquery.metadata.js 验证方式在class写验证规则:class="{validate:{ required:true,email:true }}" | |
事件函数 | submitHandler | 函数 | 表单提交时,将会触发这个函数,如果存在该函数,将会阻止表单提交 |
invalidHandler | 函数 | 如果表单验证不通过,将会触发这个函数 | |
showErrors | 函数 | 跟一个函数,可以显示总共有多少个未通过验证的元素 获取方法: this.numberOfInvalids() 设置方法不会显示错误信息,可调用方法显示:this.defaultShowErrors() | |
success | 函数/string | 要验证的元素通过验证后的动作,如果跟一个字符串,会当做一个css类,也可跟一个函数 | |
highlight | 函数 | 可以给未通过验证的元素加效果,闪烁等 | |
unhighlight | 函数 | 可以给未通过验证的元素不加效果,闪烁等 | |
指定元素 | errorPlacement | 函数 | 设置错误信息位置, 参数:error, element ,第一个为错误元素,第二个为验证元素 默认:error.appendTo(element.parent()); 放在验证元素后面 |
errorClass | “error” | 指定错误提示的css类名,可以自定义错误提示的样式 | |
errorElement | “label” | 使用什么标签标记错误 | |
wrapper | —— | 使用什么标签再把上边的errorELement包起来 | |
errorLabelContainer | 元素选择器 | 把错误信息统一放在一个容器里面 |
1.5 remote用法
(1) remote:"url" 直接指定url,参数为当前 name 值
(2) remote:{} 指定json数据,指定相关配置
配置 | 描述 |
url | 配置接口地址 |
type | 配置请求类型 |
dataType | 配置返回数据类型 |
data | 参数,可配置多个,格式 : name: function() {return $("#name").val();} |
1.6 自定义选择器
选择器 | 描述 |
:blank | 没有值的筛选器 |
:filled | 有值的筛选器 |
:unchecked | 没选择的元素的筛选器 |
2. 默认校验规则
属性 | 描述 |
---|---|
required:true | 必须输入的字段,除了Boolean,也可配置表达式或函数 |
remote:"/action" | 使用ajax方法调用action验证输入值 |
email:true | 必须输入正确格式的电子邮件 |
url:true | 必须输入正确格式的网址 |
date:true | 必须输入正确格式的日期。日期校验 ie6 出错,慎用 |
dateISO:true | 必须输入正确格式的日期(ISO),例如:2009-06-23,1998/01/22。只验证格式,不验证有效性 |
number:true | 必须输入合法的数字(负数,小数) |
digits:true | 必须输入整数 |
creditcard: | 必须输入合法的信用卡号 |
equalTo:"#field" | 输入值必须和 #field 相同 |
accept: | 输入拥有合法后缀名的字符串(上传文件的后缀) |
maxlength:5 | 输入长度最多是 5 的字符串(汉字算一个字符) |
minlength:10 | 输入长度最小是 10 的字符串(汉字算一个字符) |
rangelength:[5,10] | 输入长度必须介于 5 和 10 之间的字符串(汉字算一个字符) |
range:[5,10] | 输入值必须介于 5 和 10 之间 |
max:5 | 输入值不能大于 5 |
min:10 | 输入值不能小于 10 |
3. 示例
3.1 添加验证规则
$("#formId").validate({
rules: {
"name": {
required: true,
minlength: 1,
maxlength: 20,
remote: {
url: "url",
type: "post",
dataType: "json",
data: {
"name" : function() {
return $("#classname").val();
}
},
dataFilter: function(data, type) {
return $.validate.uniqueBoolean(data);
}
}
}
},
messages: {
"name": {
minlength: "至少1个字符",
maxlength: "最多20个字符",
remote:"name已存在"
}
}
3.2 添加自定义验证方法
$.validator.addMethod("chinese", function(value, element) {
var chinese = /^[\u4e00-\u9fa5]+$/;
return this.optional(element) || (chinese.test(value));
}, "只能输入中文");
3.3 含有多种提示语的自定义验证方法
$.validator.addMethod("subdivisions",function(value,element,params){
var msg=""
var falg=false;
if(value=="1"){
msg="提示1"
}else if(value=="2"){
msg="提示2"
}else{
falg = true;
}
$.validator.messages.subdivisions = msg;
return falg;
}, $.validator.format("") );
4. 扩展
4.1 采用中文提示
引入 messages_zh.js,或将该js代码写入 jquery-validate.js 中
(function( factory ) {
if ( typeof define === "function" && define.amd ) {
define( ["jquery", "../jquery.validate"], factory );
} else {
factory( jQuery );
}
}(function( $ ) {
/*
* Translated default messages for the jQuery validation plugin.
* Locale: ZH (Chinese, 中文 (Zhōngwén), 汉语, 漢語)
*/
$.extend($.validator.messages, {
required: "这是必填字段",
remote: "请修正此字段",
email: "请输入有效的电子邮件地址",
url: "请输入有效的网址",
date: "请输入有效的日期",
dateISO: "请输入有效的日期 (YYYY-MM-DD)",
number: "请输入有效的数字",
digits: "只能输入数字",
creditcard: "请输入有效的信用卡号码",
equalTo: "你的输入不相同",
extension: "请输入有效的后缀",
maxlength: $.validator.format("最多可以输入 {0} 个字符"),
minlength: $.validator.format("最少要输入 {0} 个字符"),
rangelength: $.validator.format("请输入长度在 {0} 到 {1} 之间的字符串"),
range: $.validator.format("请输入范围在 {0} 到 {1} 之间的数值"),
max: $.validator.format("请输入不大于 {0} 的数值"),
min: $.validator.format("请输入不小于 {0} 的数值")
});
}));
4.2 修改提示信息样式
input.error { border: 1px solid red; }
label.error {
background:url("./demo/images/unchecked.gif") no-repeat 0px 0px;
padding-left: 16px;
padding-bottom: 2px;
font-weight: bold;
color: #EA5200;
}
label.checked {
background:url("./demo/images/checked.gif") no-repeat 0px 0px;
}