$(document).ready(function(){
$("#demoForm").validate({
rules:{
username:{ //name 指的是name值不是ID
required:true,
minlength:2,
maxlength:10,
rangelength:[2,10] //长度范围,这样就不用最大、最小了
},
password:{
required:true
}
},
message:{
username:{
required:"必填项",
rangelength:"用户名在2-10之内"
},
password:{
required:"必填项"
}
}
});
});
基本API:
method:校验的方法
rule : 规则
在validate 方法中 加上 debug:true //在校验成功后,是不会进行提交操作的
基本的验证方法:
remote :远程校验
在rule规则中使用
min :表示的值 (最小数、最大数、数字范围) minlength :长度
email:邮箱格式 URL :URL格式
$("#demoFrom").validate({
rules:{
username:{
remote:{
url:"",
method:"POST",
date:{
loginTime:function(){
return +new date(); //另外多加一个参数
}
}
}
}
},
message:{
username:{
remote:"用户名错误" //remote 信息提示
}
}
});
[b]
validate : 进阶功能
[/b]
valid()
检查表单是否正确 $("#demoFrom").valid()
rule() 方法, 获取的是节点的规则
[b]
validate 静态方法
[/b]
validate配置项
submitHandler:function(form){ //通过验证后运行的
},
invalidHandler:function(event,validator){ //验证不通过后触发的方法,无效表单提交后运行的函数
}[b][/b]
//追加错误信息的位置
$("#demoFrom").validate({
groups:{
login:"username password";
},
errorPlacement:function(error,element){
error.insertBefore("#info"); //info 要追加的位置的节点
}
});
配置项 : onsubmit :是否在提交时进行验证,默认是true
onfocusout:是否在获取焦点的时候进行验证
onkeyup : 是否在敲击键盘的时候进行验证
onclick : 是否在鼠标点击的时候进行验证 一般用于checkbox或者radio
errorClass : 错误提示的css样式,可以自定义
validClass: 指定验证通过的css样式
errorElement 使用什么标签标记错误
wrapper :使用什么标签把上面的标签包装起来
errorLabelContainer:把错误信息统一放在一个容器里面
errorContainer:显示或者隐藏验证信息可以自动实现有错误时,出现把容器标记为显示,没错误时标记为隐藏
validate 自带的选择器
:blank 选择值为空 的元素 即取消空格后的值的长度是否等于零
:filled 选择所有值不为空的元素 与上面正好相反
:unchecked 所有的没有被选中的元素
validate自定义的验证方法
jQuery.validator.addMethod(name,method,[,message])
name: 方法名
method 方法体 function(value, element,params){}
message :提示信息 可选