Jquery-validate添加自定义校验和验证触发方式

清疚 2023-07-20 12:17 24阅读 0赞

我们在使用Jquery-validate插件验证表单时候，默认的提供的校验规则有限，不够用怎么办，可以自己添加自定义校验规则；默认的触发方式有时候也不符合业务需求，需要进行定制化配置修改，下面就来介绍下如何添加自定义校验规则和触发方式的修改

jquery-validate插件如何下载和引入到项目中，这里不做详细介绍了。首先看下一个测试的页面验证效果

<!DOCTYPE html>
    
    <html>
    
    <head>
    
        <meta charset="utf-8">
    
        <title>用户信息</title>
    
        <script src="../js/jquery-validation/jquery.min.js"></script>
    
        <script src="../js/jquery-validation/jquery.validate.min.js"></script>
    
        <script src="../js/jquery-validation/messages_zh.js"></script>
    
        <script src="../js/jquery-validation/additional-methods.js"></script>
    
        <script>
    
            $().ready(function() {
    
                $("#userInfoForm").validate({
    
                    rules: {
    
                        username: {
    
                            required: true,
    
                            minlength: 2
    
                        },
    
                        age: {
    
                            required: true,
    
                            digits:true
    
                        },
    
                        email: {
    
                            required: true,
    
                            email: true
    
                        }
    
                    },
    
                    messages: {
    
                        username: {
    
                            required: "请输入用户名",
    
                            minlength: "用户名必需由两个字母组成"
    
                        },
    
                        age: {
    
                            required: "请输入年龄",
    
                            digits: "必须输入整数"
    
                        },
    
                        email: "请输入一个正确的邮箱"
    
                    }
    
                });
    
            });
    
        </script>
    
        <style>
    
            .error{
    
                color:red;
    
            }
    
        </style>
    
    </head>
    
    <body>
    
    <form id="userInfoForm" method="post" action="">
    
        <fieldset>
    
            <legend>用户基本信息</legend>
    
            <p>
    
                <label for="username">用户名</label>
    
                <input id="username" name="username" type="text">
    
            </p>
    
            <p>
    
                <label for="age">年龄</label>
    
                <input id="age" name="age" type="text">
    
            </p>
    
            <p>
    
                <label for="email">Email</label>
    
                <input id="email" name="email" type="email">
    
            </p>
    
            <p>
    
                <input class="submit" type="submit" value="提交">
    
            </p>
    
        </fieldset>
    
    </form>
    
    </body>
    
    </html>

打开浏览器测试页面，然后点击提交按钮，可以看到表单右侧出现红色的错误提示信息

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2R4eXpoYmI_size_16_color_FFFFFF_t_70][]

以上测试页面都是使用自带的默认校验规则

提供的默认校验规则

required:true 必须输入的字段。

remote:"check.do" 使用ajax方法调用check.do验证输入值。

email:true 必须输入正确格式的电子邮件。

url:true 必须输入正确格式的网址。

date:true 必须输入正确格式的日期

dateISO:true 必须输入正确格式的日期（ISO），如：2017-09-17，2017/09/17。只验证格式，不验证有效性。

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。

例如例子中姓名使用了required必填校验和minlength最小2个字符限制，年龄字段使用digits校验必须是整数，邮箱使用了email格式

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2R4eXpoYmI_size_16_color_FFFFFF_t_70 1][]

如果我们想让姓名只能输入中文，默认的校验规则不符合要求，则需要添加自定义的校验规则。

$.validator.addMethod("validateName", function(value, element) {
    
      var v_regex=/^[\u4E00-\u9FA5]+(?:·[\u4E00-\u9FA5]+)*$/;
    
      value=""+value;
    
      if(value){
    
        if(!v_regex.test(value)){
    
          return false;
    
        }else{
    
          return true;
    
        }
    
      }else{
    
        return null;
    
      }
    
    }, "请正确填写您的姓名");

自定义添加的验证规则建议添加到additional-methods.js文件中

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2R4eXpoYmI_size_16_color_FFFFFF_t_70 2][]

在页面验证规则上添加validateName: true

username: {
    
       required: true,
    
       minlength: 2,
    
       validateName: true
    
    }

添加之后，页面的用户名表单，如果不填写中文，验证就通过不了

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2R4eXpoYmI_size_16_color_FFFFFF_t_70 3][]

验证的默认触发方式onsubmit，onfocusout，onkeyup，onclick，focusInvalid上，有时候不想在每次按键的时候触发验证，就需要将onkeyup设置为false，因为如果是远程验证规则，onkeyup会在每次输入一个字符的时候，触发一个远程请求，会浪费很多请求资源

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2R4eXpoYmI_size_16_color_FFFFFF_t_70 4][]

在validate参数中如图的位置添加

onkeyup:false

可以关闭onkeyup触发验证

其它的触发验证修改方式，和onkeyup方式一样，可以根据需要进行设置修改

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2R4eXpoYmI_size_16_color_FFFFFF_t_70 5][]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2R4eXpoYmI_size_16_color_FFFFFF_t_70]: /images/20230528/059443c1a3b74ab0950e556d4fab09b1.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2R4eXpoYmI_size_16_color_FFFFFF_t_70 1]: /images/20230528/53f14add07784a7893738bdec127e647.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2R4eXpoYmI_size_16_color_FFFFFF_t_70 2]: /images/20230528/41dfa7ce4de14f58bb31dd0f2b213917.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2R4eXpoYmI_size_16_color_FFFFFF_t_70 3]: /images/20230528/e862f069bfa544a7af991b190772796b.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2R4eXpoYmI_size_16_color_FFFFFF_t_70 4]: /images/20230528/ce7df7f693784fdb8c5891e05ce3901f.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2R4eXpoYmI_size_16_color_FFFFFF_t_70 5]: /images/20230528/03952a0b8f7342dca492b0f9748ac205.png