Validation-jQuery表单验证插件使用方法

浏览数：23 / 时间：2015年06月09日

http://www.cnblogs.com/shuang121/archive/2012/04/23/2466628.html

作用

jquery.validate是jquery旗下的一个验证框架，借助jquery的优势，我们可以迅速验证一些常见的输入,并且可以自己扩充自己的验证方法，并且对国际化也有很好的支持。

使用前的布置

说明：需要JQuery版本：1.2.6+

步骤：

要导入相应的jQuery.js与jquery.validate.js文件
<script src="jquery.js" type="text/javascript"></script>
<script src="jquery.validate.js" type="text/javascript"></script>

在相应的字段上指定验证规则
名称 *<input type="text" name="loginName" class="required">
其中class="required"代表本字段必须要输入数据

指定要对表单进行验证
<script type="text/javascript">

$(function(){

$("#testForm").validate();

});

</script>

效果如下图：

基础知识

指定验证规则的方式

把验证规则写到字段元素的class属性中

例：

名称 *　<input type="text" name="loginName" class="required"><br>

密 *　 <input type="password" name="password" class="required"><br>

再次输入 <input type="password" name="password2"

class="{equalTo: ‘[name=password]‘} required"><br>

生日　　 <input type="text" name="birthday" class="dateISO"><br>

E-mail *<input type="text" name="email" class="email"><br>

PAR(zip)<input type="file" name="resource" class="{accept: ‘zip‘}">

说明：

如果使用class="{key:value,…}"的方式，必须引入：jquery.metadata.js

表单字段的name不能重复，否则所配置的验证不起作用。

调用validate()方法时传递字段的验证规则

$(function() {

$("#testForm").validate({

rules: {

loginName:{

required: true,

minlength: 2

} ,

password: {

required: true

password2: {

equalTo: "input[name=password]"

}

});

内置的验证规则

required:true	必填字段
remote:"check.php"	使用ajax方法调用check.php验证输入值
email:true	必须输入正确格式的电子邮件
url:true	必须输入正确格式的网址
date:true	必须输入正确格式的日期
dateISO:true	必须输入正确格式的日期(ISO)，例如：2010-01-01，2010/01/01 只验证格式，不验证有效性
number:true	必须输入合法的数字(负数，小数)
digits:true	必须输入整数
creditcard:	必须输入合法的信用卡号
equalTo:"#field"	输入值必须和$(“#field”)相同
accept: "gif\|png\|jpg"	输入拥有合法后缀名的字符串（上传文件的后缀），多个后缀之间用’\|’隔开
maxlength:5	输入长度最多是5的字符串(汉字算一个字符)
minlength:3	输入长度最小是3的字符串(汉字算一个字符)
rangelength:[5,10]	输入长度必须介于 5 和 10 之间的字符串")(汉字算一个字符)
range:[5,10]	输入值必须介于 5 和 10 之间
max:5	输入值不能大于5
min:10	输入值不能小于10

说明：

remote是远程验证：比如注册验证用户名是否已被注册，返回值只能是true（验证成功）或false（验证失败）。在访问指定的url时，会自动把当前字段的值做为参数（以字段name为key）传递过去。

某些属性值中的引号不能省略，否则出错。如accept、equalTo等。

remote使用时遇到的问题：添加用户时需要验证用户名是否存在，当添加上一个用户后，在不离开该页面的情况下，再次添加该用户名的用户，validate不能提示该用户已存在，因为缓存的原因，jquery仍认为该用户名可用。解决方法是在页面中添加：$().ready(function(){

$.ajaxSetup ({

cache: false //关闭AJAX相应的缓存

}); // 关闭缓存功能

});

添加

修改错误信息提示位置：

修改Jquery validate 的错误提示位置，把错误提示在input内，当获得鼠标焦点的时候清楚提示信息。
    具体使用方法：
var validator = $("#myContainerForm").validate({
focusCleanup:true,//clear the error message when the error element get focus again.
onkeyup:false,
errorPlacement: function(error, element) {
showErrorMesssgeDiv(error,element);
   },
rules:{
       name:{
              required: true
       }
},
messages: {
       name:{
              required:populateErrorMessage($("#errorRequiredMessage").val(),               $("#containerNameTitle").val())
       }
}
});