运用jQuery.validator插件进行验证

      这段时间在项目中经常用到jQuery.validator插件进行验证工作。所以觉得还是很有必要进行总结一下。

 

jquery validator有两种方式：一种是直接在表单ui标签中加class="XXX",一种是为表单写rules验证规则。很明显，第一种很不灵活，有可能影响到css，messages的配置也不方便。由于在项目中运用的方式主要是在表单中写rules验证规则，所以对于第一种运用方式，这里不做探讨。 

1.要在页面中运用jQuery验证插件的功能，首先要在页面里面引入以下3个js文件：

 

 

<script src="/Scripts/jquery-1.4.1.js" type="text/javascript"></script>
 <script src="/Scripts/jquery.validate.js" type="text/javascript"></script>
 <script src="/Scripts/membership/jquery.validate.extension.js" type="text/javascript"></script>

前两个文件是jquery,jquery插件库文件，后面这个文件是自定义jquery验证方法的js文件。

 

2.接着对页面中的标签，定义验证规则和验证的提示消息。在rules部分对相应的标签写入验证规则，在message部分写入相应的验证消息。验证规则又分为两类：jquery自带的验证规则和用户自己定义的验证规则。如果对jquery自带的验证规则不在message部分定义验证消息，那么系统在调用的时候会采用默认的英文验证消息。而对于自定义的验证规则，由于在方法中已经定义了验证消息，所以在message部分就不需要重复定义了。

 

 

$(document).ready(function () {
            $("#frmSubmit").validate({
                rules: {
                    Name: {
                        required: true,
                        nameValid: true,
                        maxlength: 100
                    }},

 

messages: {

               Name: {

              required: "<span style='color:#FF0000'>&nbsp;&nbsp;请输入产品名称</span>",
              maxlength: jQuery.validator.format("<span style='color:#FF0000'>&nbsp;&nbsp;请输入一个长度最多是 {0} 的字符串</span>")
                }

                }

 

     });
});

 

 

validate自带的默认验证

        required: "必选字段",
        remote: "请修正该字段",
        email: "请输入正确格式的电子邮件",
        url: "请输入合法的网址",
        date: "请输入合法的日期",
        dateISO: "请输入合法的日期 (ISO).",
        number: "请输入合法的数字",
        digits: "只能输入整数",
        creditcard: "请输入合法的信用卡号",
        equalTo: "请再次输入相同的值",
        accept: "请输入拥有合法后缀名的字符串",
        maxlength: jQuery.format("请输入一个长度最多是 {0} 的字符串"),
        minlength: jQuery.format("请输入一个长度最少是 {0} 的字符串"),
        rangelength: jQuery.format("请输入一个长度介于 {0} 和 {1} 之间的字符串"),
        range: jQuery.format("请输入一个介于 {0} 和 {1} 之间的值"),
        max: jQuery.format("请输入一个最大为 {0} 的值"),
        min: jQuery.format("请输入一个最小为 {0} 的值")

 

 

    自定义验证规则采用方法为：jQuery.validator.addMethod("a", function(value, element) { }, "b");

    自定义验证方法的格式。

• a表示是该自定义验证方法的引用名称,value是jquery自动获取到被验证表单属性的值,element是该表单属性在document中的元素例如input,b是默认返回消息。
• 
  

自定义验证方法必须返回ture或false,this.optional(element) 这一句可有可无。当返回false的时候，表示验证没有通过，会提示验证消息。

 

//验证企业名称是否是中文，且企业名称的长度是否在8至20个汉字之间
jQuery.validator.addMethod("chinese", function (value, element) {
    var length = value.Trim().length;
    var chinese = /^[\u4e00-\u9fa5]+$/;
    return this.optional(element) || (length >= 8) && (length <= 20) && (chinese.test(value.Trim()));
}, "<span style='color:#FF0000'>&nbsp;&nbsp;请输入8至20个汉字！</span>");

 

定义好验证方法后，在页面的标签对应的rules:chinese:true调用自定义验证方法对控件进行验证。