使用：
1.导入jquery.js文件
2.导入jquery-validate.js文件
3.导入messages_zh.js国际化文件(可以不导入的)
4.对表单进行校验
在页面加载成功后获取表单对象.validate({
rules:{}, //校验规则
messages:{} //自定义提示信息
})
rules写法：
不要写id,是name
要校验的(name属性)：{
校验器1：取值，
校验器2：取值
}
注意：多个校验规则之间 使用,分割
message写法：
要校验的name属性：{
校验器1："自定义提示信息1"，
校验器2："自定义提示信息2"
}
校验器：
required true/false 必填校验
number true/false 数字校验
min 数字 最小值
max 数字 最大值
range 数值区间 [最小值,最大值]
minLength|maxLength|rangLength 最小值|最大值|长度区间
email: email 邮箱校验 @ 1@x
equalTo: jquery对象 重复性校验
用法练习
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="../js/jquery-1.11.0.min.js" ></script>
<script type="text/javascript" src="../js/jquery.validate.js" ></script>
<script type="text/javascript">
$(function(){
$("#formId").validate({
rules:{
zhanghao:{
//必填校验
required:true
},
mima:{
//必填校验
required:true
},
tel:{
//一个大括号里面有2个校验器,用逗号分隔
required:true,
//数字校验
number:true
},
age:{
//数值区间
range:[0,100]
},
mima2:{
//重复性校验
equalTo:$("[name=mima]")
},
min:{
//最小值
min:2
}
},
messages:{
zhanghao:{
required:"请输入账号"
},
mima:{
required:"请输入密码"
},
tel:{
required:"请输入手机号",
number:"请输入正确手机号"
},
age:{
range:"请输入正确年龄"
},
mima2:{
equalTo:"两次密码输入必须一致"
},
min:{
//最小值
min:"最小值为2,请正确输入"
}
}
})
})
</script>
</head>
<body>
<form id="formId">
账号<input name="zhanghao" type="text" /><br />
密码<input name="mima" type="text" /><br />
确认密码<input name="mima2" type="text" /><br />
手机<input name="tel" type="text" /><br />
年龄<input name="age" type="text" /><br />
最小值<input name="min" type="text" /><br />
<input id="sub" type="submit" value="注册"/>
</form>
</body>
</html>
自定义校验器
$.validator.addMethod("校验器的名称",function(value,ele,param){
value:用户录入的值
ele：当前录入的值所在的js对象
param：校验器的取值
return true: 符合校验器规则
return false： 不符合校验器规则 (默认return false)
},"提示信息")
身份证校验器
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="../js/jquery-1.11.0.min.js" ></script>
<script type="text/javascript" src="../js/jquery.validate.js" ></script>
<script type="text/javascript">
$(function(){
$("#formId").validate({
rules:{
card:{
cardid:true
}
},
})
//自定义校验器
$.validator.addMethod("cardid",function(value,ele,param){
if(value.length==15){
//15位身份证的正则
var reg=/^[0-9]{15}$/;
//正则匹配返回true或false
return reg.test(value);
}
if(value.length==18){
//18位
var reg=/^([0-9]{18}|[0-9]{17}[X|x])$/;
return reg.test(value);
}
},"请输入正确的身份证号码")
})
</script>
</head>
<body>
<form id="formId">
身份证<input name="card" type="text" /><br />
<input id="sub" type="submit" value="注册"/>
</form>
</body>
</html>