第一节 validate插件
1.1 validate概述
validate:jQuery的一个插件,依赖jQuery使用, validate是历史最悠久的jQuery插件之一, 经过了全球范围内不同项目的验证, 并得到了许多Web开发者的好评, 作为一个标准的验证方法库
validate拥有如下特点:
1. 内置验证规则: 拥有必填、数字、Email、URL和信用卡号码等19类内置验证规则
2. 自定义验证规则: 可以很方便地自定义验证规则
3. 简单强大的验证信息提示: 默认了验证信息提示, 并提供自定义覆盖默认的提示信息的功能
4. 实时验证: 可能通过keyup或blur事件触发验证，而不仅仅在表单提交的时候验证
1.2 validate使用步骤
使用步骤:
1. 导入jquery文件
2. 导入validate.js
3. 页面加载成功后!对表单进行验证! $("选择器").validate();
4. 在validate中编写校验规则
$("选择器").validate({
rules:{},
messages:{}
});
1.3 校验规则
默认校验规则
(1)required:true 必输字段
(2)remote:"check.php" 使用ajax方法调用check.php验证输入值
(3)email:true 必须输入正确格式的电子邮件
(4)url:true 必须输入正确格式的网址
(5)date:true 必须输入正确格式的日期 日期校验ie6出错，慎用
(6)dateISO:true 必须输入正确格式的日期(ISO),例如: 2009-06-23
(7)number:true 必须输入合法的数字(负数，小数)
(8)digits:true 必须输入整数
(9)creditcard: 必须输入合法的信用卡号
(10)equalTo:"#field" 输入值必须和#field相同
(11)accept: 输入拥有合法后缀名的字符串（上传文件的后缀）
(12)maxlength:5 输入长度最多是5的字符串(汉字算一个字符)
(13)minlength:10 输入长度最小是10的字符串(汉字算一个字符)
(14)rangelength:[5,10] 输入长度必须介于 5 和 10 之间的字符串")(汉字算一个字符)
(15)range:[5,10] 输入值必须介于 5 和 10 之间
(16)max:5 输入值不能大于5
(17)min:10 输入值不能小于10
1.4 案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript" src="../js/jquery-1.12.4.js"></script>
<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: {
//1.校验元素的name属性 username:"校验器" 使用单一的校验器
//2.校验元素的name属性 username:{校验器:"值",校验器:"值"}
username: {
required: true,
rangelength: [6, 16]
},
password: {
required: true,
digits: true,
rangelength: [6, 16]
},
repeat: {
equalTo: "#password"
},
minvalue: {
min: 10
},
section: {
range: [10, 20]
},
email: {
required: true,
email: true
},
sex: {
required: true
}
},
messages: {
// name的属性:提示信息
// name的属性:{校验器:"xx","校验器":"xxx"}
username: {
required: "用户名不能为空",
rangelength: "长度为6-16"
},
password: {
required: "密码不能为空",
digits: "必须是数字",
rangelength: "长度为6-16"
},
repeat: {
equalTo: "两次密码不一致"
},
minvalue: {
min: "最小值是{0}"
},
section: {
range: "最小值是{0}, 最大值是{1}"
},
email: {
required: "邮箱不能为空",
email: "邮箱格式不正确"
},
sex: {
required: "性别不能为空"
}
}
});
});
</script>
</head>
<body>
<form id="formId" action="#">
必填：<input type="text" name="username"/> <br/>
必填数字：<input type="text" name="password" id="password"/> <br/>
必填重复：<input type="text" name="repeat"/> <br/>
最小值：<input type="text" name="minvalue"/> <br/>
区间：<input type="text" name="section"/> <br/>
邮箱: <input type="text" name="email"><br>
性别: <input type="radio" name="sex" value="M">男
<input type="radio" name="sex" value="W">女<br>
<input type="submit" value="提交"/><br>
</form>
</body>
</html>
