validate的使用
前面我们使用的是js手写表单校验，在实际使用中，这样太麻烦了，我们可以使用validate插件，帮我们做一些繁琐的事情
入门
下载插件
http://bassistance.de/jquery-plugins/jquery-plugin-validation/
简单试用
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<script type="text/javascript" src="js/jquery-1.11.3.min.js"></script>
<!--validate.js是建立在jquery之上的，先导入jquery的类库-->
<script type="text/javascript" src="js/jquery.validate.min.js"></script>
<!--引入国际化js文件-->
<script type="text/javascript" src="js/messages_zh.js"></script>
<script>
$(function() {
$("#form").validate({
rules: {
username: {
required: true,
minlength: 3
},
password: {
required: true,
minlength: 3,
digits:true //必须数字
}
},
messages: {
username: {
required: "不能为空",
minlength: "3位以上"
},
password: {
required: true,
minlength: "3位以上",
digits:"密码必须是整数!"
}
}
});
});
</script>
<body>
<form action="#" id="form">
用户名：<input type="text" name="username" /><br /> 密码：
<input type="password" name="password" /><br />
<input type="submit" value="提交" />
</form>
</body>
</html>
上文的demo就是一个入门实例，我针对我学习它中遇到的坑，做一些描述，帮助初学者少走一些根本没意义的弯路。
0）调用validate方法的是form表单的jq对象
1）rules和message是写在validate（{ }）的{ }中的
2）rules与message中的逗号，两个校验项之间的逗号（不是；）
3）校验项是文本框中的name属性对应的值
以上注意点，虽说简单，但是在没有报错提示的情况下，它是很难找到的，毕竟它是陌生的。
检验项的默认校验规则：
(1)、required:true 必输字段
(2)、remote:"remote-valid.jsp" 使用ajax方法调用remote-valid.jsp验证输入值
(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:true 必须输入合法的信用卡号
(10)、equalTo:"#password" 输入值必须和#password相同
(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）在message后面可以添加下面这句
//用来创建错误提示信息标签,validate插件默认的就是label
errorElement: "label",
（添加的原因如下图所示）
解决
<input type="radio" name="sex" value="男"/>男
<input type="radio" name="sex" value="女"/>女<em></em>
<label for="sex" class="error" style="display: none;"></label>
如果加了errorElement: "label", 的话就可以使用 上面加红的指定位置展示提示信息。
2）验证成功可以添加自己的类
success: function(label) { //验证成功后的执行的回调函数
//label指向上面那个错误提示信息标签label
label.text(" ") //清空错误提示消息
.addClass("success"); //加上自定义的success类
}
success类如下
label.success{
background:url(../img/checked.gif) no-repeat 10px 3px;
padding-left: 30px;
}
以上是笔者的一些学习记录与心得，请不要当成完整的教学文档来使用，比如自定义校验、国际化什么的，我都未提及。
![PHP学习(3)-表单使用的总结一.简单的列子二.表单的验证三.验证 E-mail 和 URL四.保留输入的值[图]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)