zoukankan      html  css  js  c++  java
  • 第一百八十三节,jQuery-UI,知问前端--验证插件

    jQuery-UI,知问前端--验证插件

    学习要点:

      1.使用 validate.js 插件

      2.默认验证规则

      3.validate()方法和选项

      4.validate.js 其他功能

    验证插件(validate.js),是一款验证常规表单数据合法性的插件。使用它,极大的解 放了在表单上繁杂的验证过程,并且错误提示显示的完善也增加了用户体验。

    一.使用 validate.js 插件

    官网下载:http://bassistance.de/jquery-plugins/jquery-plugin-validation 最重要的文件是 validate.js,还有两个可选的辅助文件:additional-methods.js(控件 class 方式)和 message_zh.js(提示汉化)文件(实际使用,请使用 min 压缩版)。

    html

    <form id="reg" action="123.html">
        <p class="myerror"></p>
        <p>帐号:<input type="text" name="user" id="user" title="帐号错误" /></p>
        <p>密码:<input type="text" name="pass" id="pass" /></p>
        <p>邮编:<input type="text" name="code" id="code" /></p>
        <p><input type="submit" value="提交" /></p>
    </form>

    第一步:引入 validate.js

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

    第二步:在 JS 文件中执行

    $('#reg').validate(); //在form元素上使用,表单验证方法

    二.默认验证规则

    Validate.js 的默认验证规则的写法有两种形式:1.控件属性方式;2.JS 键值对传参方式。

    validate()方法,接收一个对象,对象里有两个基本属性rules,和messages,rules写验证规则,messages写提示信息

            $('#reg').validate({
                rules : {
                    //获取表单元素的name值来写验证规则
                },
                messages : {
                    //获取表单元素的name值来写验证提示,以上面对象
                }
            });

    rules默认规则列表

    required:true 必须输入字段,不能为空

        //将表单执行表单验证方法
        $('#reg').validate({
            rules: {                                //编写规则
                user: {                             //表单name为user的
                    required: true                  //表单不能为空
                }
            },
            messages: {                             //编写提示信息
                user: {                             //表单name为user的
                    required: '用户名不能为空!'       //不符合规则的提示
                }
            }
        });


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

        //将表单执行表单验证方法
        $('#reg').validate({
            rules: {                                //编写规则
                ail: {                              //表单name值
                    email: true                     //必须输入正确格式的电子邮件
                }
            },
            messages: {                                      //编写提示信息
                ail: {                                       //表单name值
                    email: '必须输入正确格式的电子邮件!'       //不符合规则的提示
                }
            }
        });


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

        //将表单执行表单验证方法
        $('#reg').validate({
            rules: {                                //编写规则
                ail: {                              //表单name值
                    url: true                     //必须输入正确格式的电子邮件
                }
            },
            messages: {                                      //编写提示信息
                ail: {                                       //表单name值
                    url: '必须输入正确格式的网址包含http://!'       //不符合规则的提示
                }
            }
        });


    date:true 必须输入正确格式的日期(IE6 验证出错)

        //将表单执行表单验证方法
        $('#reg').validate({
            rules: {                                //编写规则
                ail: {                              //表单name值
                    url: true                     //必须输入正确格式的电子邮件
                },
                riq:{
                    date:true                     //必须输入正确格式的日期
                }
            },
            messages: {                                      //编写提示信息
                ail: {                                       //表单name值
                    url: '必须输入正确格式的网址包含http://!'       //不符合规则的提示
                },
                riq:{
                    date:'必须输入正确格式的日期!'
                }
            }
        });


    dateISO:true 必须输入正确格式的日期(ISO)(只验证格式,不验证有效)

        //将表单执行表单验证方法
        $('#reg').validate({
            rules: {                                //编写规则
                ail: {                              //表单name值
                    url: true                     //必须输入正确格式的电子邮件
                },
                riq:{
                    dateISO:true                     //必须输入正确格式的日期(ISO)(只验证格式,不验证有效)
                }
            },
            messages: {                                      //编写提示信息
                ail: {                                       //表单name值
                    url: '必须输入正确格式的网址包含http://!'       //不符合规则的提示
                },
                riq:{
                    dateISO:'必须输入正确格式的日期!'
                }
            }
        });


    number:true 必须输入合法的数字(负数,小数)

        //将表单执行表单验证方法
        $('#reg').validate({
            rules: {                                //编写规则
                ail: {                              //表单name值
                    number: true                     //必须输入合法的数字(负数,小数)
                }
            },
            messages: {                                      //编写提示信息
                ail: {                                       //表单name值
                    number: '必须输入合法的数字(负数,小数)!'       //不符合规则的提示
                }
            }
        });


    digits:true 必须输入正整数

        //将表单执行表单验证方法
        $('#reg').validate({
            rules: {                                //编写规则
                ail: {                              //表单name值
                    digits: true                     //必须输入正整数
                }
            },
            messages: {                                      //编写提示信息
                ail: {                                       //表单name值
                    digits: '必须输入合法的数字(负数,小数)!'       //不符合规则的提示
                }
            }
        });


    creditcard:true 必须输入合法的信用卡号,例如:5105105105105100

        //将表单执行表单验证方法
        $('#reg').validate({
            rules: {                                //编写规则
                ail: {                              //表单name值
                    creditcard: true                     //必须输入合法的信用卡号
                }
            },
            messages: {                                      //编写提示信息
                ail: {                                       //表单name值
                    creditcard: '必须输入合法的信用卡号!'       //不符合规则的提示
                }
            }
        });


    equalTo:"#field" 输入值必须和#field 相同,密码确认,值为密码框的id

        //将表单执行表单验证方法
        $('#reg').validate({
            rules: {                                //编写规则
                ail: {                              //表单name值
                    equalTo: '#pass'                     //输入值必须和#field 相同,密码确认
                }
            },
            messages: {                                      //编写提示信息
                ail: {                                       //表单name值
                    equalTo: '确认密码与密码不一致'       //不符合规则的提示
                }
            }
        });

    minlength:5 输入长度最小是 5 的字符串(汉字算一个字符)

        //将表单执行表单验证方法
        $('#reg').validate({
            rules: {                                //编写规则
                ail: {                              //表单name值
                    minlength: 3               //输入长度最小是
                }
            },
            messages: {                                      //编写提示信息
                ail: {                                       //表单name值
                    minlength: '输入长度不得小于3位'       //不符合规则的提示
                }
            }
        });


    maxlength:10 输入长度最多是 10 的字符串(汉字算一个字符)

        //将表单执行表单验证方法
        $('#reg').validate({
            rules: {                                //编写规则
                ail: {                              //表单name值
                    maxlength: 5               // 输入长度最多是
                }
            },
            messages: {                                      //编写提示信息
                ail: {                                       //表单name值
                    maxlength: '输入长度不得大于5位'       //不符合规则的提示
                }
            }
        });


    rangelength:[5,10] 输入长度介于 5 和 10 之间的字符串")(汉字算一个字符)

        //将表单执行表单验证方法
        $('#reg').validate({
            rules: {                                //编写规则
                ail: {                              //表单name值
                    rangelength: [2,5]               // 输入长度介于 5 和 10 之间的字符串
                }
            },
            messages: {                                      //编写提示信息
                ail: {                                       //表单name值
                    rangelength: '输入长度不得小于2位,大于5位'       //不符合规则的提示
                }
            }
        });


    range:[5,10] 输入值必须介于 5 和 10 之间,数值必须大于5小于10

        //将表单执行表单验证方法
        $('#reg').validate({
            rules: {                                //编写规则
                ail: {                              //表单name值
                    range: [5,10]               // 数值必须大于5小于10
                }
            },
            messages: {                                      //编写提示信息
                ail: {                                       //表单name值
                    range: '数值必须大于5小于10'       //不符合规则的提示
                }
            }
        });


    min:5 输入值不能小于 5

        //将表单执行表单验证方法
        $('#reg').validate({
            rules: {                                //编写规则
                ail: {                              //表单name值
                    min: 5               // 输入值不能小于 5
                }
            },
            messages: {                                      //编写提示信息
                ail: {                                       //表单name值
                    min: '数值不能小于5'       //不符合规则的提示
                }
            }
        });


    max:10 输入值不能大于 10

        //将表单执行表单验证方法
        $('#reg').validate({
            rules: {                                //编写规则
                ail: {                              //表单name值
                    max: 10               // 输入值不能大于 10
                }
            },
            messages: {                                      //编写提示信息
                ail: {                                       //表单name值
                    max: '数值不能大于10'       //不符合规则的提示
                }
            }
        });


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

    三.validate()的方法和选项

    除了默认的验证规则外,validate.js 还提供了大量的其他属性和方法供开发者使用。比 如,调试属性,错误提示位置一系列比较有用的选项。

    jQuery.format 格式化错误提示,自动获取规则里的数值显示到提示,第1个参数写0,第二个参数1

        //将表单执行表单验证方法
        $('#reg').validate({
            rules: {                             //编写规则
                ail: {                           //表单name值
                    max: 100                      //输入值不能大于 10
                }
            },
            messages: {                        //编写提示信息
                ail: {                         //表单name值
                    max: jQuery.format('数值不能大于{0}')       //jQuery.format 格式化错误提示
                }
            }
        });

    debug : true开启调试模式禁止提交

        //将表单执行表单验证方法
        $('#reg').validate({
            debug : true,                       //开启调试模式禁止提交
            rules: {                             //编写规则
                ail: {                           //表单name值
                    max: 100                      //输入值不能大于 10
                }
            },
            messages: {                        //编写提示信息
                ail: {                         //表单name值
                    max: jQuery.format('数值不能大于{0}')       //jQuery.format 格式化错误提示
                }
            }
        });

    setDefaults()全局方法,设置调试模式为默认,可以禁止多个表单提交

    $.validator.setDefaults({
      debug : true,
    });

    submitHandler : function{form}使用其他方式代替默认提交,函数接收form,阻止默认提交,并且表单验证通过后执行函数

        //将表单执行表单验证方法
        $('#reg').validate({
            debug : true,                       //开启调试模式禁止提交
            rules: {                             //编写规则
                ail: {                           //表单name值
                    max: 10                  //输入值不能大于 10
                }
            },
            messages: {                        //编写提示信息
                ail: {                         //表单name值
                    max: jQuery.format('数值不能大于{0}')       //jQuery.format 格式化错误提示
                }
            },
            submitHandler:function (form) {   //阻止默认提交,并且表单验证通过后执行函数
                //alert(form);   //会得到form对象
                //一般用于ajax提交
            }
        });

    ignore : '#pass',忽略某个字段验证,值为要忽略的字段id

        //将表单执行表单验证方法
        $('#reg').validate({
            ignore : '#ail',    //忽略某个字段验证,值为要忽略的字段id
            rules: {                             //编写规则
                ail: {                           //表单name值
                    max: 10                  //输入值不能大于 10
                }
            },
            messages: {                        //编写提示信息
                ail: {                         //表单name值
                    max: jQuery.format('数值不能大于{0}')       //jQuery.format 格式化错误提示
                }
            }
        });

    groups群组错误提示,将提示信息群组在一起,值是对象,对象里属性为自定义名称,值为要群组的name值,多个空格隔开

        //将表单执行表单验证方法
        $('#reg').validate({
            ignore : '#ail',    //忽略某个字段验证,值为要忽略的字段id
            rules: {                             //编写规则
                ail: {                           //表单name值
                    max: 10                  //输入值不能大于 10
                }
            },
            messages: {                        //编写提示信息
                ail: {                         //表单name值
                    max: jQuery.format('数值不能大于{0}')       //jQuery.format 格式化错误提示
                }
            },
            groups: {
                myerror: 'user pass'
            }
        });

    errorPlacement显示群组的错误提示

        //将表单执行表单验证方法
        $('#reg').validate({
            ignore : '#ail',    //忽略某个字段验证,值为要忽略的字段id
            rules: {                             //编写规则
                ail: {                           //表单name值
                    max: 10                  //输入值不能大于 10
                }
            },
            messages: {                        //编写提示信息
                ail: {                         //表单name值
                    max: jQuery.format('数值不能大于{0}')       //jQuery.format 格式化错误提示
                }
            },
            focusInvalid: false,
            errorPlacement: function (error, element) {
                $.each(error, function (index, value) {
                    $('.myerror').html($('.myerror').html() + $(value).html());
                })
            }
        });

    errorPlacement将群组的错误指定存放位置

        //将表单执行表单验证方法
        $('#reg').validate({
            ignore : '#ail',    //忽略某个字段验证,值为要忽略的字段id
            rules: {                             //编写规则
                ail: {                           //表单name值
                    max: 10                  //输入值不能大于 10
                }
            },
            messages: {                        //编写提示信息
                ail: {                         //表单name值
                    max: jQuery.format('数值不能大于{0}')       //jQuery.format 格式化错误提示
                }
            },
            errorPlacement: function (error, element) {  //将群组的错误指定存放位置
                error.appendTo('.myerror');   //将群组的错误指定存放位置
            }
        });

    errorClass设置错误提示的 class 名,参数为Class名称

        //将表单执行表单验证方法
        $('#reg').validate({
            rules: {                             //编写规则
                ail: {                           //表单name值
                    max: 10                  //输入值不能大于 10
                }
            },
            messages: {                        //编写提示信息
                ail: {                         //表单name值
                    max: jQuery.format('数值不能大于{0}')       //jQuery.format 格式化错误提示
                }
            },
            errorClass:'cuor'  //设置错误提示的 class 名
        });

    errorElement设置错误提示的标签,值为标签名称

        //将表单执行表单验证方法
        $('#reg').validate({
            rules: {                             //编写规则
                ail: {                           //表单name值
                    max: 10                  //输入值不能大于 10
                }
            },
            messages: {                        //编写提示信息
                ail: {                         //表单name值
                    max: jQuery.format('数值不能大于{0}')       //jQuery.format 格式化错误提示
                }
            },
            errorElement : 'p'  //设置错误提示的标签
        });

    errorLabelContainer统一包裹错误提示,也就是给错误提示标签,包裹一个标签

        //将表单执行表单验证方法
        $('#reg').validate({
            rules: {                             //编写规则
                ail: {                           //表单name值
                    max: 10                  //输入值不能大于 10
                }
            },
            messages: {                        //编写提示信息
                ail: {                         //表单name值
                    max: jQuery.format('数值不能大于{0}')       //jQuery.format 格式化错误提示
                }
            },
            errorLabelContainer: 'ol.error',  //给错误提示标签,包裹一个标签
            wrapper: 'li'
        });

    success设置成功后加载的 class ,注意是验证通过后才会有这个class,一般做验证成功后的样式,成功后输入框内样式

        //将表单执行表单验证方法
        $('#reg').validate({
            rules: {                             //编写规则
                ail: {                           //表单name值
                    max: 10                  //输入值不能大于 10
                }
            },
            messages: {                        //编写提示信息
                ail: {                         //表单name值
                    max: jQuery.format('数值不能大于{0}')       //jQuery.format 格式化错误提示
                }
            },
            success : 'succe'  //设置成功后加载的 class
        });

    success使用方法加载成功后 class 并添加文本,一般做成功后的信息提示样式,成功后输入框外样式

        //将表单执行表单验证方法
        $.validator.setDefaults({
            debug: true
        });
        $('#reg').validate({
            rules: {                             //编写规则
                ail: {                           //表单name值
                    max: 10                  //输入值不能大于 10
                }
            },
            messages: {                        //编写提示信息
                ail: {                         //表单name值
                    max: jQuery.format('数值不能大于{0}')       //jQuery.format 格式化错误提示
                }
            },
            success: function (label) {                  //使用方法加载成功后 class 并添加文本
                label.addClass('success').text('ok');
            }
        });

    highlight高亮显示有错误的元素,变色式,也就是有错输入框闪烁

        //将表单执行表单验证方法
        $.validator.setDefaults({
            debug: true
        });
        $('#reg').validate({
            rules: {                             //编写规则
                ail: {                           //表单name值
                    max: 10                  //输入值不能大于 10
                }
            },
            messages: {                        //编写提示信息
                ail: {                         //表单name值
                    max: jQuery.format('数值不能大于{0}')       //jQuery.format 格式化错误提示
                }
            },
            highlight: function (element, errorClass) {     //也就是有错输入框闪烁
                $(element).fadeOut(function () {
                    $(element).fadeIn()
                })
            }
        });

    highlight高亮显示有错误的元素,变色式,有错输入框边框变色

        //将表单执行表单验证方法
        $.validator.setDefaults({
            debug: true
        });
        $('#reg').validate({
            rules: {                             //编写规则
                ail: {                           //表单name值
                    max: 10                  //输入值不能大于 10
                }
            },
            messages: {                        //编写提示信息
                ail: {                         //表单name值
                    max: jQuery.format('数值不能大于{0}')       //jQuery.format 格式化错误提示
                }
            },
            highlight: function (element, errorClass) {       //有错输入框边框变色
                $(element).css('border', '1px solid red');
            }
        });

    unhighlight成功的元素移出错误高亮,也就是使用上面两种的情况下,成功了将变色去掉

        //将表单执行表单验证方法
        $.validator.setDefaults({
            debug: true
        });
        $('#reg').validate({
            rules: {                             //编写规则
                ail: {                           //表单name值
                    max: 10                  //输入值不能大于 10
                }
            },
            messages: {                        //编写提示信息
                ail: {                         //表单name值
                    max: jQuery.format('数值不能大于{0}')       //jQuery.format 格式化错误提示
                }
            },
            highlight: function (element, errorClass) {       //有错输入框边框变色
                $(element).css('border', '1px solid red');
            },
            unhighlight: function (element, errorClass) {     //成功了将变色去掉
                $(element).css('border', '1px solid #ccc');
            }
        });

    invalidHandler表单提交时获取信息

        //将表单执行表单验证方法
        $.validator.setDefaults({
            debug: true
        });
        $('#reg').validate({
            rules: {                             //编写规则
                ail: {                           //表单name值
                    max: 10                  //输入值不能大于 10
                }
            },
            messages: {                        //编写提示信息
                ail: {                         //表单name值
                    max: jQuery.format('数值不能大于{0}')       //jQuery.format 格式化错误提示
                }
            },
            invalidHandler: function (event, validator) {
                var errors = validator.numberOfInvalids();
                if (errors) {
                    $('.myerror').html('您有' + errors + '个表单元素填写非法!');
                }
            }
        });

    showErrors获取错误提示句柄,不用提交及时获取值

        //将表单执行表单验证方法
        $.validator.setDefaults({
            debug: true
        });
        $('#reg').validate({
            rules: {                             //编写规则
                ail: {                           //表单name值
                    max: 10                  //输入值不能大于 10
                }
            },
            messages: {                        //编写提示信息
                ail: {                         //表单name值
                    max: jQuery.format('数值不能大于{0}')       //jQuery.format 格式化错误提示
                }
            },
            showErrors: function (errorMap, errorList) {
                var errors = this.numberOfInvalids();
                if (errors) {
                    $('.myerror').html('您有' + errors + '个表单元素填写非法!');
                } else {
                    $('.myerror').hide();
                }
                this.defaultShowErrors(); //执行默认错误
            }
        });

    showErrors获取错误提示句柄,errorList

        //将表单执行表单验证方法
        $.validator.setDefaults({
            debug: true
        });
        $('#reg').validate({
            rules: {                             //编写规则
                ail: {                           //表单name值
                    max: 10                  //输入值不能大于 10
                }
            },
            messages: {                        //编写提示信息
                ail: {                         //表单name值
                    max: jQuery.format('数值不能大于{0}')       //jQuery.format 格式化错误提示
                }
            },
            showErrors: function (errorMap, errorList) {
                alert(errorList[0].message); //得到错误信息
                alert(errorList[0].element); //当前错误的表单元素
            }
        });

    四.validate.js 其他功能

    remote属性,可以将表单信息通过ajax提交服务器验证,这个功能一般验证用户名是否存在,或密码是否一致等,值是要提交的url地址

    使用 remote:url,可以对表单进行 ajax 验证,默认会提交当前验证的值到远程地址。如 果需要提交其他的值,可以使用 data 选项。

     验证用户名是否被占用

        //将表单执行表单验证方法
        $('#reg').validate({
            rules: {                             //编写规则
                user: {                          //表单name值,用户名
                    required : true,             //用户名不能为空
                    remote : 'yzh.php'          //将用户名字段,提交远程地址验证
                }
            },
            messages: {                         //编写提示信息
                user: {                         //表单name值,用户名
                    required: '用户名不能为空',  //jQuery.format 格式化错误提示
                    remote : '用户名被占用'      //如果远程,返回false,显示错误信息
                }
            }
        });

    验证php文件

    <?php
        if ($_GET['user'] == 'abc') {   //接收用户名值判断,如果用户名等于abc
            echo 'false';  //如果用户名存在,返回false
        } else {
            echo 'true';   //否则返回,true
        }
    ?>

    注意:远程地址php只能返回'true'或'false',不能输出其他值。

    remote属性,同时传递多个值到远程端,验证登录,账号和密码是否正确

        //将表单执行表单验证方法
        $('#reg').validate({
            rules: {                             //编写规则
                pass: {                          //表单name值,密码
                    required : true,             //用户名不能为空
                    //remote : 'yzh.php'         //默认只能传递密码,还要传递其他表单,对象传值
                    remote : {
                        url: 'yzh.php',          //验证地址
                        type: 'POST',            //验证方式
                        data: {                  //验证内容,
                            user: function () {   //传递用户名,默认会传递pass,密码
                                return $('#user').val();  //获取用户名值
                            }
                        }
                    }
                }
            },
            messages: {                         //编写提示信息
                pass: {                         //表单name值,密码
                    required: '用户名不能为空',  //jQuery.format 格式化错误提示
                    remote : '用户名或者密码不正确'      //如果远程,返回false,显示错误信息
                }
            }
        });

    验证php文件

    <?php
        if ($_POST['user'] != 'bnbbs' || $_POST['pass'] != '123456') {   //接收用户名和密码,
            echo 'false';  //如果用户名和密码正确返回false
        } else {
            echo 'true';   //如果用户名和密码不正确返回true
        }
    ?>

    validate.js 提供了一些事件触发的默认值,这些值呢,大部分建议是不用更改的。下面的一般使用不到

    onsubmit取消提交验证,默认是 true

        //将表单执行表单验证方法
        $('#reg').validate({
            onsubmit : false,                    //默认是 true
            rules: {                             //编写规则
                pass: {                          //表单name值,密码
                    required : true              //用户名不能为空
                }
            },
            messages: {                         //编写提示信息
                pass: {                         //表单name值,密码
                    required: '用户名不能为空'   //错误提示
                }
            }
        });

    注意:设置为 false 会导致直接传统提交,不会实现验证功能,一般是用于 keyup/click/blur 验证提交。

    onfocusout设置鼠标离开不触发验证,默认为 true

        //将表单执行表单验证方法
        $('#reg').validate({
            onfocusout : false,                  //默认为 true
            rules: {                             //编写规则
                pass: {                          //表单name值,密码
                    required : true              //用户名不能为空
                }
            },
            messages: {                         //编写提示信息
                pass: {                         //表单name值,密码
                    required: '用户名不能为空'   //错误提示
                }
            }
        });

    onkeyup设置键盘按下弹起不触发验证,默认为 true

        //将表单执行表单验证方法
        $('#reg').validate({
            onkeyup : false,                    //默认为 true
            rules: {                             //编写规则
                pass: {                          //表单name值,密码
                    required : true              //用户名不能为空
                }
            },
            messages: {                         //编写提示信息
                pass: {                         //表单name值,密码
                    required: '用户名不能为空'   //错误提示
                }
            }
        });

    注意:只要设置了,在测试的浏览器不管是 false 还是 true 都不触发了。

    onclick设置点击 checkbox 和 radio 点击不触发验证,默认为 true

        //将表单执行表单验证方法
        $('#reg').validate({
            onclick : false, //默认为 true
            rules: {                             //编写规则
                pass: {                          //表单name值,密码
                    required : true              //用户名不能为空
                }
            },
            messages: {                         //编写提示信息
                pass: {                         //表单name值,密码
                    required: '用户名不能为空'   //错误提示
                }
            }
        });

    focusInvalid设置错误提示后,无法获取焦点,默认为 true

        //将表单执行表单验证方法
        $('#reg').validate({
            focusInvalid : false, //默认为 true
            rules: {                             //编写规则
                pass: {                          //表单name值,密码
                    required : true              //用户名不能为空
                }
            },
            messages: {                         //编写提示信息
                pass: {                         //表单name值,密码
                    required: '用户名不能为空'   //错误提示
                }
            }
        });

    focusCleanup提示错误时,隐藏错误提示,不能和 focusInvalid 一起用,冲突,默认为 true

        //将表单执行表单验证方法
        $('#reg').validate({
            focusCleanup : true, //默认为 false
            rules: {                             //编写规则
                pass: {                          //表单name值,密码
                    required : true              //用户名不能为空
                }
            },
            messages: {                         //编写提示信息
                pass: {                         //表单name值,密码
                    required: '用户名不能为空'   //错误提示
                }
            }
        });

    ignoreTitle如果表单元素设置了 title 值,且 messages 为默认,就会读取 title 值的错误信息,我们 可以通过 ignoreTitle : true,设置为 true,屏蔽这一个功能。

        //将表单执行表单验证方法
        $('#reg').validate({
            ignoreTitle : true, //默认为 false
            rules: {                             //编写规则
                pass: {                          //表单name值,密码
                    required : true              //用户名不能为空
                }
            },
            messages: {                         //编写提示信息
                pass: {                         //表单name值,密码
                    required: '用户名不能为空'   //错误提示
                }
            }
        });

    valid()判断表单所验证的元素是否全部有效

        //将表单执行表单验证方法
        $('#reg').validate({
            rules: {                             //编写规则
                pass: {                          //表单name值,密码
                    required : true              //用户名不能为空
                }
            },
            messages: {                         //编写提示信息
                pass: {                         //表单name值,密码
                    required: '用户名不能为空'   //错误提示
                }
            }
        });
        alert($('#reg').valid()); //全部有效返回 true

    Validate.js 提供了可以单独验证每个表单元素的 rules 方法,不但提供了 add 增加验证, 还提供了 remove 删除验证的功能。

    rules()方法,增加或者删除表单元素验证

        //将表单执行表单验证方法
        $('#reg').validate({
    
        });
        $('#user').rules('add', {   //将输入框id为user的增加validate验证
            required: true,
            minlength: 2,
            messages: {
                required: '帐号不得为空!',
                minlength: jQuery.format('帐号不得小于{0}位!')
            }
        });

    删除验证

        //将表单执行表单验证方法
        $('#reg').validate({
    
        });
        $('#user').rules('add', {   //将输入框id为user的增加validate验证
            required: true,
            minlength: 2,
            messages: {
                required: '帐号不得为空!',
                minlength: jQuery.format('帐号不得小于{0}位!')
            }
        });
        //删除 user 的所有验证规则
        $('#user').rules('remove');
        //删除 user 的指定验证规则
        $('#user').rules('remove', 'minlength min max');

    addMethod添加自定义验证

        //添加自定义验证
        $.validator.addMethod('code', function (value, element) {  //添加自定义验证规则名称为code
            var tel = /^[0-9]{6}$/;
            return this.optional(element) || (tel.test(value));
        }, '请正确填写您的邮政编码');
    
        //将表单执行表单验证方法
        $('#reg').validate({
            rules: {       //增加自定义验证
                code: {    //name为code的元素
                    required: true,  //不能为空
                    code: true       //自定义验证规则
                }
            }
        });
  • 相关阅读:
    第七周 10.11-10.17
    第六周 10.4-10.10
    2015 ACM/ICPC Asia Regional Hefei Online
    cryptopals S1-6
    cryptopals S1-5
    cryptopals S1-4
    Cryptopals S1-3
    Crptopals S1-2
    Crptopals S1-1
    anaconda the procedure entry point openssl_sk_new_reserve could not be located in the dynamic link library libssl-1_1-x64.DLL
  • 原文地址:https://www.cnblogs.com/adc8868/p/6559208.html
Copyright © 2011-2022 走看看