jQuery # jQuery插件validation自定义验证表单项的合法性

Posted 2021-06-06 LRcoding

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了jQuery # jQuery插件validation自定义验证表单项的合法性相关的知识，希望对你有一定的参考价值。

1. 引入插件

<!--先引入jQuery库，再引入jQuery校验插件-->
<script src="js/jquery-1.9.1.min.js" type="text/javascript"></script>
<script src="js/jquery.validate.js" type="text/javascript"></script>

<!-- 如果不想自定义错误提示信息，可以用插件库默认的，但是要引入中文（默认英文）-->
<script src="js/messages_zh.js" type="text/javascript" ></script>

2. 构造表单

<body>
    <form action="..url" name="demoForm" id="demoForm" method="post" enctype="multipart/form-data">
        <input type="text" id="myText" name="myText" placeholder="输入测试文字" />
    </form>
</body>

3. 定义规则（默认的）

格式：$("form表单的选择器").validate(rules : {json格式}, messages : {json格式});

<script>
    $("#demoForm").validate({
        rules : { // 校验规则
            myText : { // 表单项的 name 值
                required : true,               // true要求必须输入内容
                email : true,                  // 必须输入正确的 email 格式
                url : true,                    // 必须输入正确的 网址格式
                date : true,                   // 必须输入正确的 日期格式
                dateISO : true,                // 必须输入正确的 ISO日期格式
                number : true,                 // 必须输入合法的数字（负数，小数）
                digits : true,                 // 必须输入整数
                equalTo : "#123",              // 输入的值必须和id为 123 的值相同，可以用于判断两次输入的密码是否相同
                accept : true,                 // 输入拥有合法后缀名的字符串
                maxlength : 5,                 // 输入最大长度只能是 5 的字符串
                minlength : 10,                // 输入最小长度只能是 10 的字符串
                rangelength : [5, 10],         // 输入长度介于 5 到 10 之间的字符串
                range : [5, 10],               // 输入值必须介于 5 和 10 之间
                max : 5,                       // 输入值不能大于 5
                min : 10,                      // 输入值不能小于 10
                remote : {                     // 发送 ajax 请求
                    url : "。。。url",
                    type : "post",
                    dataType : "json",
                    data : {
                        // 要传递的数据
                    }
                },
                myRules : true                 // 用户自定义的规则，需要在外层用代码定义
            }
        },
        
        messages : { // 不符合校验规则后的提示信息
            myText : {
                required : "必须输入内容",       // 当输入的数据不符合 required 规则时，显示此提示信息
                myRules : "违反了自定义的规则"    // 当数据不符合 自定义的 myRules 规则时，显示此提示信息
            }
        }
    })
</script>

4. 自定义规则

格式：$.validator.addMethod("校验规则名称", function(value, element, params){} )

value：将 自定义的校验规则 加在某个表单项上，该表单项的输入值
element：表单项的节点对象
params：校验规则的参数

$.validator.addMethod ("myRules", function(value, element, params) {
    var flag = false;
    // 根据具体的业务需求，进行逻辑处理，修改 flag 的值，比如发送 ajax 请求等
    alert(value);
    alert(element);
    alert(params);
    return flag;
})