用户在注册的时候,会有个表单页面,然后有些选项是必填的,有些要填的内容是有规范的,这些都要在用户提交之前进行验证才行,如果不符合要求,需要在右边显示一个友好的提示,让用户修改。此时Validate做表单校验的特效药就发挥作用了!
Validate特点:
1、内置验证规则:拥有必填、数字、email、url和信用卡号码等19类内置验证规则
2、自定义验证规则:可以很方便的自定义验证规则
3、简单强大的验证信息提示:默认了验证信息提示,并提供自定义覆盖默认提示信息的功能
4、实时验证:可以通过keyup或bulr事件触发验证,而不仅仅在表单提交的时候验证。
Validate下载:http://bassistance.de/jquery-plugins/jquery-plugin-validation/
下面是我的简易表单:
我想设定的规则是:(见代码,非常简单的规则)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Validate使用示例</title>
<!--注意导入的顺序-->
<script type="text/javascript" src="js/jquery-1.8.3.js" ></script>
<script type="text/javascript" src="js/jquery.validate.min.js" ></script>
<script type="text/javascript" src="js/messages_zh.js" ></script>
<script>
$(function(){
$("#checkForm").validate({
rules:{
username:{
required:true,//不能为空
minlength:5,//长度必须大于等于5
maxlength:10,//最大长度是10
},
password:{
required:true,
digits:true,
minlength:6,
},
password2:{
required:true,
digits:true,
equalTo:"[name='password']"
}
},
messages:{
username:{
required:"用户名不能为空",
minlength:"用户名不得少于5个字符",
maxlength:"用户名最多10个字符"
},
password:{
required:"密码不能为空",
digits:"密码必须是整数",
minlength:"密码不得少于6位"
},
password2:{
required:"确认密码不能为空",
equalTo:"两次输入密码不一致"
}
}
});
});
</script>
</head>
<body>
<form action="#" id="checkForm">
<table border="0px">
<tr>
<td> 用户名</td>
<td><input type="text" name="username"/><br></td>
</tr>
<tr>
<td>密码</td>
<td><input type="password" name="password"/></td>
<td></td>
</tr>
<tr>
<td>确认密码</td>
<td><input type="password" name="password2"/></td>
</tr>
<tr>
<td>邮箱</td>
<td><input type="email" name="email"></td>
</tr>
<tr>
<td><input type="submit" value="提交" /></td>
</tr>
</table>
</form>
</body>
</html>
好了,看看效果,这只是个简单的使用示例,需要更好提示效果的话也可以参考:http://www.jb51.net/article/85110.html
重点就在于设定校验的规则,常见的属性:
required:true 必须输入的字段。
remote:"check.php" 使用 ajax 方法调用 check.php 验证输入值。
email:true 必须输入正确格式的电子邮件。
url:true 必须输入正确格式的网址。
date:true 必须输入正确格式的日期。日期校验 ie6 出错,慎用。
dateISO:true 必须输入正确格式的日期(ISO),例如:2009-06-23,1998/01/22。只验证格式,不验证有效性。
number:true 必须输入合法的数字(负数,小数)。
digits:true 必须输入整数。
creditcard: 必须输入合法的信用卡号。
equalTo:"#field" 输入值必须和 #field 相同。
accept: 输入拥有合法后缀名的字符串(上传文件的后缀)。
maxlength:5 输入长度最多是 5 的字符串(汉字算一个字符)。
minlength:10 输入长度最小是 10 的字符串(汉字算一个字符)。
rangelength:[5,10] 输入长度必须介于 5 和 10 之间的字符串(汉字算一个字符)。
range:[5,10] 输入值必须介于 5 和 10 之间。
max:5 输入值不能大于 5。
min:10 输入值不能小于 10。
具体参考:http://www.runoob.com/jquery/jquery-plugin-validate.html
一个非常好的参考网站!