Jquery插件——Validation

最新推荐文章于 2022-08-04 05:00:00 发布

BaldWinf

最新推荐文章于 2022-08-04 05:00:00 发布

阅读量5.3k

点赞数

分类专栏： jquery 文章标签： jquery插件

本文链接：https://blog.csdn.net/u011118321/article/details/51306742

版权

jquery 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

一、如何使用

引入js文件

<script src="jquery.js"></script>
<script src="jquery.validate-1.13.1.js"></script>

编写html页面，这里仅以用户名、密码为例

<body>
    <form id="demoForm">
        <fieldset>
            <legend>用户登录</legend>
            <p>
                <label for="username">用户名</label>
                <input type="text" id="username" name="username">
            </p>
            <p>
                <label for="password">密码</label>
                <input type="text" id="password" name="password">
            </p>
        </fieldset>
    </form>
</body>

编写script脚

$(document).ready(function(){
    $("#demoForm").validate({
        rules:{
            username:{
                required:true,// 是否必填
                minlength:2,  // 最小长度
                maxlength:10  // 最大长度
            },
            password:{
                required:true,
                minlength:2,
                maxlength:16
            }
        }
    });
});

测试

关于提示显示红色等样式问题，可以根据需要添加，这里不再赘述
改变提示信息为中文

注意：规则中定义的username是对应input的name属性

二、提示信息可以默认是中文吗？ ——国际化

引入国际化文件
jquery.validate.messages_cn.js
直接引入，然后验证信息不写即可。

已经比较好了，但是对于提示信息，我还希望美化一下，比如成功了有个勾，错了有个差，怎么办？

三、如何美化验证信息

默认验证提示信息的标签是“label”，我们可以改成“em”，然后针对em.error和em.success中添加css样式。再添加成功回调函数，控制是class属性即可

这里写图片描述

现在这样就比较完美了，但是还有一个很重要的问题，除了常用的验证信息，我可能还有一些奇葩的验证规则，我该怎么扩展呢？

常见验证规则如下
这里写图片描述

四、怎么添加自己的验证规则

废话不多说，直接上代码

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/jquery-1.9.1.min.js"></script>
    <!--验证核心插件-->
    <script src="js/jquery.validate.js"></script>
    <!--国际化，支持中文-->
    <script src="js/jquery.validate.messages_cn.js"></script>
    <script>
        $(function(){
            // 添加新的验证规则
            $.validator.addMethod(
                "formulate",                    // 验证方法名称
                function(value,element,param){  // 验证规则
                    console.log(element);       // element是元素对象
                    return value == eval(param);
                },
                "请正确输入数学公式计算后的结果"      // 验证提示信息
            );
            // 使用
            $("#myForm").validate({
                rules:{
                    code:{
                        formulate:"7+9"
                    }
                }
            })
        })
    </script>
</head>
<body>
    <form id="myForm">
        7+9=<input name="code" type="text">
        <input type="submit" value="提交">
    </form>
</body>
</html>

建议自定义验证信息单独写在一个js文件中引入。注意它依赖jquery.validate.js，所以要后引入

基本API

两个重要概念

method：
    验证方法，指的是验证的逻辑，如email方法，检查输入的文本是否符合email的规则

rule：
    验证规则，指的是元素和验证方法的关联。

validate方法

核心方法，定义了基本的校验规则和一些有用的配置项
例如：debug，如果该参数为true，那么表单不会提交，只进行检查，调试时十分方便

这里写图片描述

基本的验证方法

其中remote远程校验用法如下：

表示发送地址为remote.json的get请求，查看chrome的debug可以看到：

remote主要用于校验名称是否存在等需要查询数据库的校验
当然remote不仅仅是get请求，也可以发送post请求

通过debug查看是post请求

其他基本方法讲解

rangelength:[2,10]，长度范围在2到10位之间
email:true，校验email格式
url:true，校验是否是合法的url。注意，必须带有http才是合法的url
date:true，日期需要可以被Date.parse函数解析才是有效日期，  然而符合格式的日期是非常多的
dateISO:true，iso格式必须是2011/08/22或者2011-08-22的格式
number:true，校验数字
digits:true，校验整数
equalTo:"#password"，属性后面的值是一个选择器，用来校验是否与另一个元素相等

别的很简单，这里不讲了

高级API

<1> valid()方法：校验表单或某些元素是否有效

    创建表单校验的按钮

<p>
    <button id="check">检查表单</button>
</p>

    为按钮添加事件，这里valid()方法会校验该表单是否有效

$("#check").click(function(){
        alert($("#demoForm").valid()?"填写正确":"填写错误");
    });

效果图

这里写图片描述

<2>rules

rules() 获取表单元素的校验规则
rules("add",rules)向表单元素增加校验规则
reles("remove",rules)删除表单元素校验规则

<3>Validator对象
这里写图片描述

$("#demoForm").validate()返回validator对象

这里写图片描述

addClassRules(name,rules)：给一类组合添加验证

$.validator.addClassRules({
        txt:{
            required:true,
            minlength:5
        }
    });

<4>validate()方法配置项
这里写图片描述

如下，展示了submitHandler和invalidHandler的用法

$("#demoForm").validate({
        rules:{
            username:{
                required:true,
                minlength:2,
                maxlength:10
            },
            password:{
                required:true,
                minlength:2,
                maxlength:16,
            }
        },
        messages:{
            username:{
                required:"必须填写用户名",
                minlength:"用户名最小2位",
                maxlength:"用户名最大10位"
            },
            password:{
                required:"必须填写密码",
                minlength:"密码最小2位",
                maxlength:"密码最大16位"
            }
        },
        submitHandler:function(form){
            console.log($(form).serialize());
        },
        invalidHandler:function(event,validator){
            console.log("错误数"+validator.numberOfInvalids());
        }
    });

其中invalidHandler还可以用通过事件触发

$("#demoForm").on("invalid-form",function(event,validator){
        console.log("错误数"+validator.numberOfInvalids());
    })

ignore的用法

invalidHandler:function(event,validator){
            console.log("错误数"+validator.numberOfInvalids());
},
ignore:"#username" // 默认不对隐藏的元素校验。
// 注意这里不要写分号，都是逗号结尾的

拓展rules
rules在定义要校验的属性的时候，可以选择依赖什么而触发，即前提条件，例如：

username:{
                required:{// depends决定什么情况下该校验生效
                    depends:function(element){ // element代表username元素
                        return $("#password").is(":filled"); // 只有返回 true的时候，该校验才会启动，
                    }           // 其中:filled是validate自带的过滤器，表示是否被填写
                                        // 这里的意思是 “只有密码被填写，才校验用户名”
                },
                minlength:2,
                maxlength:10
            },
            password:{
                required:true,
                minlength:2,
                maxlength:16,
            }

required好理解，因为本身的值就是true，而像 minlength:2这样带参数的属性，怎么使用depends呢？答案如下：

minlength:{
    param:2,
    depends:function(element){
        return $("#password").is(":filled");
    }
},

groups:{
            login:"username password"
        },
errorPlacement:function(error,element){
    error.insertBefore("#info");
},

validate()方法其他配置项
这里写图片描述

submitHandler:function(form){
            console.log($(form).serialize());
        },
        onsubmit:false // 默认是true，当false的时候，提交表单不验证
        //与onfocusout,onkeyup,onclick同理，这里不一一解释

focusInvalid: // 默认true，即获取第一个框的焦点，设置为false则不回获取焦点
focusCleanup: 同理

这里写图片描述

errorClass:"wrong", // 当为wrong时，验证错误的时候会给错误信息的label添加wrong的class属性，而不是默认的error了
validClass:"right", // 同理

errorContainer:"#info", // errorLabelContainer其实已经显示错误信息了，errorContainer是在显示错误信息的时候仍然需要显示一些其他的提示才存在的
        errorLabelContainer:"#info",
        errorElement:"li",
        wrapper:"ul"

这里写图片描述
showErrors一般用来自定义错误信息的展示处理

showErrors:function(errorMap,errorList){
            console.log(errorMap);
            console.log(errorList);
        }

success:”right” 给验证通过的信息的label标签添加right的class属性
也可以通过方法来设置

success:function(label){
            label.addClass("right");
        }

highlight:function(element,errorClass,validClass){
            $(element).addClass(errorClass).removeClass(validClass);
            $(element).fadeOut().fadeIn();
        }

这里写图片描述
:blank 全角空格不是blank

自定义验证方法
这里写图片描述

$.validator.addMethod("postcode",function(value,element,params){
        var postcode = /^[0-9]{6}$/;
        return this.optional(element) || (postcode.test(value)); // 后一个判断是根据正则判断，前一个判断保证如果没有填写内容，不做验证
    },"请填写正确的邮编！");

$.validator.addMethod("postcode",function(value,element,params){
        var postcode = /^[0-9]{6}$/;
        return this.optional(element) || (postcode.test(value)); // 后一个判断是根据正则判断，前一个判断保证如果没有填写内容，不做验证
    },$.validator.format("请填写正确的{0}邮编！"));

国际化

BaldWinf

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
1
评论
Jquery插件——Validation

一、如何使用引入js文件<script src="jquery.js"></script><script src="jquery.validate-1.13.1.js"></script>编写html页面，这里仅以用户名、密码为例<body> <form id="demoForm"> <fieldset> <legend>用户登录</legend
复制链接

扫一扫

专栏目录