zoukankan      html  css  js  c++  java
  • jquery avlidate 插件:(3)校验规则

     

    官网的例子里引用了几个js和css文件,但只需引用jquery.validate.js这一个文件即可.
    贴个简单的例子:
    $('#EditView').validate({
                      event: "keyup",
                      rules:{
                          name:{required:true},
                          cosa_commodity_group_list:{required:true}
                      },
                      submitHandler:function(){
                          $("#group_list > option").attr("selected","selected");
                          $(this).submit();
                      }
    });

    1.event是触发校验的方式,可选值有keyup(每次按键时),blur(当控件失去焦点时),不使用这个参数时就只在按提交按钮时触发
    2.如果在提交前还需要进行一些自定义处理使用submitHandler参数,其它的都比较简单,自己看看API就成了.
    3.debug
    ,如果这个参数为true,那么表单不会提交,只进行检查,调试时十分方便.
    4.rules,所有的检验规则都写在这个参数里面.

    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} 的值")

    校验规则参数

    格式为:           ID : {rule1,rule2,...}

                 (1) required: true            必输
                 (2) number: true 只能输入数字(包括小数)
                 (3) digits:true 只能输入整数
                 (4) minValue: 3 不能小于3
                 (5) maxValue: 100 最大不超过100
                 (6) rangeValue:[50,100] 值范围为50-100
                 (7) minLength: 5 最小长度(汉字算一个字符)
                 (8) maxLength:           10 最大长度(汉字算一个字符)
                 (9) rangeLength:[5,10] 长度范围为5至10位(汉字算一个字符)
                 (10) 上面的minLength, maxLength, rangeLength 这三项除了text input之外还可以用于checkbox,select这两种控件
                 (11) email:true 电子邮件
                 (12) equalTo: "#field" 与#field值相同
                 (13) dateISO:true          日期型,格式为1998/01/22            1999-12-12

    5.messages,自定义错误信息,格式与rules类似,需要注意的是如果使用此项,那么所有的校验项都必需自定义出错信息,如果只想定义其中的某一些,那么就把其它的出错信息定义为空(即""),系统即会使用默认值。

    messages {
                   password: {
                       required: "
    请输入您的密码."
                     minLength: "
    密码不能小于5位.",
                       maxLength: "
    密码不能长于32位."
                   },

    如何自定义校验规则:

    可以通过自定义检验函数的方式新增加校验规则,步骤如下:

    1. 在定义校验规则之前定义一个新的方法
    2. 在rules中指定这个某个域使用此校验规则
    3. 在messages中指定这个域使用此校验规则没有通过的提示信息

    //这里定义了一个名为equal的规则
    //value
    是指当前校验域的值
    //element
    是指当前检验的域
    //param
    是指在rules中设定的参数
    //
    这三个参数会在进行校验时由系统自动带入
    $.validator.methods.equal = function(value, element, param){
        //
    在这里使用上面的三个参数进行校验
        if(value == param)
            return true;//
    如果当前域的值等于指定的参数就通过校验
    };

    $('#form1').validate({
              rules:{
                  field1:{equal:20}//
    在这里指定field1的检验规则是equal,并且参数是20
              },
              messages:{
                  field1:{equal:'
    您的计算有误!'}//在这里定义field1的equal规则校验出错后的提示信息
              }
    });

    将校验规则写到控件中

      有时候我们的控件是动态生成的,这个时候就不可能提前先写好校验规则,需要在生成控件的同时写校验规则.

    这样写校验规则有两种写法,一是将规则写到class属性中,二是将规则写到单独的validate属性中,其中:

    写到class属性的写法如下,例子中在规则前添加了名为some, other, styles 的三个class:

    <script src="../js/jquery.js" type="text/javascript"></script>
    <script src="../js/jquery.validate.js" type="text/javascript"></script>

    <input id="cname" name="name" class="some other styles {required:true,minLength:2}" />
    <textarea id="ccomment" name="comment" class="{required:true}"></textarea>

    第二种写法如下,使用自定义的validata属性,但必需加载jquery.metadata.js这个文件,并且在
    $("#frm").validate();代码前添加:$.metadata.setType("attr", "validate");

    <script src="../js/jquery.js" type="text/javascript"></script>
    <script src="../js/jquery.metadata.js" type="text/javascript"></script>
    <script src="../js/jquery.validate.js" type="text/javascript"></script>

    <script type="text/javascript">
    $(function(){

        $.metadata.setType("attr", "validate");           

        $("#frm").validate();
    });

    </script>

    <input type="checkbox" id="spam_email" value="email" name="spam" validate="required:true, minLength:2" />

  • 相关阅读:
    C# lock
    read appSettings in configuration file by XElement with xmlns
    get all sites under IIS
    Cross-site scripting(XSS)
    Do not throw System.Exception, System.SystemException, System.NullReferenceException, or System.IndexOutOfRangeException intentionally from your own source code
    C++ 算法
    C++ 数据结构概念
    C++ STL 常用算术和生成算法
    C++ STL 常用拷贝和替换算法
    C++ STL 常用排序算法
  • 原文地址:https://www.cnblogs.com/linyechengwei/p/1620499.html
Copyright © 2011-2022 走看看