需求:
通过validate插件来校验表单,validate是别人封装好的第三方工具
技术分析:
jqery validate
一、validate使用步骤:
1. 导入jquery.js
2. 导入validate.js
3. 在页面加载成功后,对表单进行校验 $(“选择器”).validate()
4. 在validate中编写校验规则
$("选择器").validate({
rules:{},
messages:{}
});
二、默认校验规则
(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,1998/01/22 只验证格式,不验证有效性
(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
三、更改错误信息显示的样式
设置错误提示的样式,可以增加图标显示,在该系统中已经建立了一个validation.css专门用于维护校验文件的样式
<style>
input.error { border: 1px solid red; }
label.error {
background:url("./demo/images/unchecked.gif") no-repeat 0px 0px;
padding-left: 16px;
padding-bottom: 2px;
font-weight: bold;
color: #EA5200;
}
label.checked {
background:url("./demo/images/checked.gif") no-repeat 0px 0px;
}
</style>
例子:
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="../js/jquery-1.11.0.js" type="text/javascript"></script>
<!--validate校验库-->
<script src="../js/jquery.validate.js" type="text/javascript"></script>
<!--国际化库,中文提示-->
<script src="../js/messages_zh.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
$("#formId").validate({
rules:{
//字段的name属性:"校验器"
//字段的name属性:{校验器:"值",校验器:"值"}
username:"required",
password:{
required:true,
digits:true
},
repassword:{
equalTo:"[name=password]"
},
zuixiaozhi:{
min:3
},
shuzhiqujian:{
range:[5,10]
}
},
messages:{
//字段的name属性:"提示内容"
//字段的name属性:{校验器:"提示内容",校验器:"提示内容"}
username:"请填写用户名,用户名不能为空",
password:{
required:"密码不能为空",
digits:"密码只能是数字"
},
repassword:{
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>