1.导入validate是jQuery插件,及必须在jQuery的基础上进行运行。我们将导入jQuery库、validate库、和国际化资源库(可选)
<!--依赖的jQuery库-->
<script src="../js/jquery-1.11.0.js" type="text/javascript" charset="utf-8" />
<!--validate校验库-->
<script src="../js/jquery.validate.js" type="text/javascript" charset="utf-8" />
<!--国际化库,中文提示(可选)-->
<script src="../js/messages_zh.js" type="text/javascript" charset="utf-8" />
2.使用前提
validate需要手动的声明,对那个表单进行校验,手动方式可以使用以下4种检验方式。
<script type="text/javascript">
$().ready(function () {
$("#formId").validate();
});
</script>
3.检验器查询表
4. 检验方式:js 代码
语法:
$(…).validate({
rules:{},
messages:{}
});
rules 规则语法:
rules:{
字段名:”校验器”,
字段名:”校验器”
}
校验器语法:
语法1:"校验器"
语法2:{校验器:"取值",校验器:"取值",...}
message 提示语法:
message:{
字段名:{校验器:"提示",校验器:"提示",...}
}
5.案例
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="js/jquery-1.11.0.min.js" type="text/javascript" charset="utf-8"></script>
<!--validate校验库-->
<script src="js/jquery.validate.js"></script>
<!--国际化库,中文提示-->
<script type="text/javascript">
$(function () {
$("#formId").validate({
rules:{
username:"required",
password:{
required:true,
digits:true
},
repassword:{
required:true,
equalTo:"[name='password']"
},
zuixiaozhi:{
min:6
},
shuzhiqujian:{
range:[5,10]
}
},
messages:{
username:"用户名不能为空",
password:{
required:"密码不能为空",
digits:"密码必须是数字"
},
repassword:{
required:"重复输入密码不能为空",
equalTo:"两次输入密码不一致"
},
zuixiaozhi:{
min:"最小值不应该小于{0}"
},
shuzhiqujian:{
range:"输入范围应在{0}与{1}之间"
}
}
})
})
</script>
</head>
<body>
<form id="formId" action="">
必填:<input type="text" name="username"/> <br/>
必填数字:<input type="text" name="password"/> <br />
必填重复:<input type="text" name="repassword"/> <br />
最小值:<input type="text" name="zuixiaozhi"/> <br />
区间:<input type="text" name="shuzhiqujian"/> <br />
<input type="submit" value="提交"/>
</form>
</body>
</html>