Jquery的validate的表单验证功能学习
① 官网地址:http://jqueryvalidation.org/files/jquery-validation-1.15.0.zip
②帮助文档位置:http://jqueryvalidation.org/documentation/
③导入
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" />
④使用前提
validate需要手动的声明
<script type="text/javascript">
$().ready(function () {
$("#formId").validate();
});
</script>
⑤检验器查询表
校验类型 | 取值 | 描述 |
---|---|---|
required | true/false | 必填字段 |
“@”或者”email” | 邮件地址 | |
url | 路径 | |
date | 数字 | 日期 |
dateISO | 字符串 | 日期(YYYY-MM-dd) |
number | 数字(负数,小数) | |
digits | 整数 | |
minlength | 数字 | 最小长度 |
maxlength | 数字 | 最大长度 |
rangelength | [minL,maxL] | 长度范围 |
min | 最小值 | |
max | 最大值 | |
range | [min,max] | 值范围 |
equalTo | jQuery表达式 | 两个值相同 |
remote | url路径 | ajax校验 |
⑥检验方式:js 代码
语法:
$(…).validate({
rules:{},
messages:{}
});
rules 规则语法:
rules:{
字段名:”校验器”,
字段名:”校验器”
}
校验器语法:
语法1:”校验器”
语法2:{校验器:”取值”,校验器:”取值”,…}
message 提示语法:
message:{
字段名:{校验器:”提示”,校验器:”提示”,…}
}
⑦案例
$("#formId").validate({
rules:{
username:"required",
password:{
required:true,
rangelength:[2,5]
},
repassword:{
equalTo:"[name='password']"
}
},
messages:{
username:{
required:"不能为空"
},
password:{
rangelength:"长度{0}-{1}之间"
}
}
});
⑧代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="../js/jquery-1.11.0.js" type="text/javascript" charset="utf-8"></script>
<!--validate校验库-->
<script type="text/javascript" src="../js/jquery.validate.js"></script>
<!--国际化库,中文提示-->
<script type="text/javascript" src="../js/messages_zh.js"></script>
<script type="text/javascript">
$(function() {
$("#formId").validate({
rules: {
username: "required",
password: {
required: true,
digits: true
},
repassword: {
equalTo: "[name='password']"
}
},
messages: {
username: "不可以为空",
password: {
required: "密码不可以为空",
digits: "请输入数字"
}
}
});
})
</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>
效果图: