jQuery的validate插件使用整理

★  1.jQuery.validate插件的作用

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

2.HelloWorld

说明：需要JQuery版本：1.2.6+

步骤：

1，导入的jQuery.js与jquery.validate.js等文件，注意顺序不要颠倒
<script type="text/javascript" src="jquery.js">
<script type="text/javascript" src="jquery.metadata.js">
<script type="text/javascript" src="jquery.validate.js">

2，指定哪个（或哪些）表单要在提交前先进行验证
<script type="text/javascript">

       $(function(){

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

        });

</script>

3，指定每个字段的验证规则
名称*<input type="text" name="loginName" class="required">
其中class="required" 表示本字段必须要填写。

 

效果如下图：

 

 

★       第二部分：基础知识

1.指定验证规则的方式

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

例：

用户名：<input type="password" name="password" class="required">

电子邮件：<input type="text" name="email" class="required email">

密码：<input type="password" name="password" id="password1"

class="{required: true, minlength: 3}">

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

class="{equalTo:'[#password1]'} required">

 

以上用了两种方式：

1，指定多个class名称（验证规则），多个class名称之间用空格隔开，如：class="required email"。

2，使用JSON对象，指定多个属性，如：class="{required: true, minlength: 3}"。可以为某验证规则指定所用的参数，如minlength规则需要指定最小长度，这里为3。

3，混合使用，如：class="{equalTo:'[#password1]'} required"。

 

说明：

1，如果使用第2种方式（JSON对象），就必须引入：jquery.metadata.js，作用是解析JSON对象。

2，如果表单字段的name不能重复，则只有最前面的配置起作用。

1.2.  调用validate()方法时指定验证规则

$(function() {

    $("#testForm").validate({

        rules: {

            loginName:{ required: true, minlength: 2},

            password: { required: true },

            password2: { equalTo: "#password1" }

        }

    });

});

2.可以使用哪些验证规则（内置的验证规则）

required:true	必填字段
remote:"/checkName.do"	使用ajax方式访问”/checkName.do”，通过返回true或false表示输入值通过或未通过验证
email:true	必须输入正确格式的电子邮件
url:true	必须输入正确格式的网址
date:true	必须输入正确格式的日期
dateISO:true	必须输入正确格式的日期(ISO)，例如：2010-01-01，2010/01/01只验证格式，不验证有效性
number:true	必须输入合法的数字(负数，小数)
digits:true	必须输入整数
creditcard:	必须输入合法的信用卡号
equalTo:"expr"	输入值必须和$(“expr”)的值相同， expr例子：#fieldId
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

说明：

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

2，例如使用remote验证用户名是否存在，当添加一个用户后，在当前窗口中（同一个窗口），再次添加一个同名的用户，validate不能提示该用户已存在，这是因为缓存的原因，jquery仍认为该用户名可用。解决方法是在页面中添加如下代码：
    $().ready(function(){
        $.ajaxSetup ({
                cache: false //关闭ajax相应的缓存
         });
     });

3，某些属性值中的引号不能省略，否则出错。如accept、equalTo等，因为这时他需要的是一个字符串。

 

3.有关错误提示消息

3.1.  更改默认的错误提示消息

jQuery.extend(jQuery.validator.messages, {

    required: "请填写本字段",

    remote: "验证失败",

    email: "请输入正确的电子邮件",

    url: "请输入正确的网址",

    date: "请输入正确的日期",

    dateISO: "请输入正确的日期 (ISO).",

    number: "请输入正确的数字",

    digits: "请输入正确的整数",

    creditcard: "请输入正确的信用卡号",

    equalTo: "请再次输入相同的值",

    accept: "请输入指定的后缀名的字符串",

    maxlength: jQuery.validator.format("允许的最大长度为 {0} 个字符"),

    minlength: jQuery.validator.format("允许的最小长度为 {0} 个字符"),

    rangelength: jQuery.validator.format("允许的长度为{0}和{1}之间"),

    range: jQuery.validator.format("请输入介于 {0} 和 {1} 之间的值"),

    max: jQuery.validator.format("请输入一个最大为 {0} 的值"),

    min: jQuery.validator.format("请输入一个最小为 {0} 的值")

});

3.2.  仅对当前表单改变提示消息

方法一：在class中指定某验证规则的错误消息

<input type="file" name="parResource"

class="{
  required: true, accept: 'zip',
  messages: {required: '请选择文件', accept:'请选择正确的文件'}
}">    （提示：使用时不能换行）

 

方法二：在调用validate()方法时指定某验证规则的错误消息

$(function() {

    $("#myForm").validate({

        messages:{

            username:{ required: "请填写用户名" },

            email: { required: '请填写email', email: "请填与正确的email"}

        }

    });

});

3.3.  设置错误消息的显示样式

指定label.error的样式就可以了，如下：

<style type="text/css">

    label.error{

        margin-left: 10px;

        color: red;

    }

</style>

 

说明：label.error指class为error的label元素，如：
<label for="username" class="error">

★       第三部分：扩展

1.自定义验证规则

除了内置的验证规则，validation还允许自定义验证规则。这是通过validation的addMethod()方法实现的，语法为：

jQuery.validator.addMethod("name",function,message)

其中:

1，name为验证规则的名称

2，function定义验证的规则。参数有?。返回值为?。

3，message是验证失败时的提示信息。

 

2.让错误提示信息显示到指定的位置

$(function(){

    $("form").validate({wrapper: 'div'});

});

3.     对于radio与checkbox等的验证指定

4.     附录