学习 表单验证插件validate

Posted 敢问

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了学习 表单验证插件validate相关的知识,希望对你有一定的参考价值。

技术分享技术分享技术分享技术分享技术分享技术分享技术分享技术分享技术分享技术分享技术分享

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<link rel="stylesheet" href="style.css">
<body>
    <form action="" id="demoForm">
        <fieldset>
            <legend>用户登陆</legend>
                <p id="info"></p>
                <p id="info2" style="display:none">输入错误</p>
                <p>
                    <label for="usename">用户登录</label>
                    <input type="text" id="usename" name="usename">     
                </p>
                <p>
                    <label for="parseword">密码</label>
                    <input type="password" id="parseword" name="parseword">
                </p>
                <p>
                    <label for="confirm-parseword">确认密码</label>
                    <input type="password" id="confirm-parseword" name="confirm-parseword">
                </p>
                <p>
                    <label for="dates">日期</label>
                    <input type="text" id="dates" name="dates">
                </p>
                <p>
                    <label for="emails">邮箱</label>
                    <input type="text" id="emails" name="emails">
                </p>
                <p>
                    <label for="loads">地址</label>
                    <input type="text" id="loads" name="loads">
                </p>
                <p>
                    <label for="numbers">数字</label>
                    <input type="text" id="numbers" name="numbers">
                </p>
                
                <p>
                    <label for="postcodes">邮政编码</label>
                    <input type="text" id="postcodes" name="postcodes">
                </p>

                <p>
                    <input type="submit" value="登录"/>
                </p>
                <p>
                    <button id="check">检测表单</button>
                </p>
        </fieldset>
    </form>
</body>
<script src="http://cdn.bootcss.com/jquery/3.1.0/jquery.js"></script>
<script src="jquery.validate.js"></script>
<script>    
    var validator; 
    $(document).ready(function(){
        validator = $("#demoForm").validate({
            debug:true,//只进行检测不提交,调试很方便
            rules:{//定义校验规则
                usename:{//usename是input的name不是id
                    required:{
                            depends:function(element){
                                return $("#parseword").is(":filled");//密码是否填写  不填写密码不校验用户名
                            }
                        },
                    //url:true,//地址需要输入  http || https
                    //email:true,//验证邮箱
                    minlength:{
                            param:2,
                            depends:function(element){
                                return $("#parseword").is(":filled");//密码是否填写  不填写密码不校验用户名
                            }
                        },//最小长度
                    maxlength:10,//最大长度
                    //rangelength:[2,10],//长度范围
                    //remote:"remote.json" GET请求
                    /*remote:{
                        url:"remote.json",
                        type:"post",
                        data:{
                            loginTime:function(){
                                return + new Date;
                            }
                        }
                    }*/
                },
                parseword:{
                    required:true,
                    minlength:5,
                    maxlength:16
                },
                "confirm-parseword":{
                    equalTo:"#parseword"
                },


                dates:{
                    required:true,
                    //date:true//范围非常广
                    dateISO:true
                },
                emails:{
                    required:true,
                    email:true
                },
                loads:{
                    required:true,
                    url:true
                },
                numbers:{
                    required:true,
                    //number:true//整数数字、小数
                    digits:true//非负整数
                },
                postcodes:{
                    //required:true,
                    postcode:"中国"
                },
            },
            messages:{//定义提示信息
                usename:{
                    required:"必填",
                    minlength:"最少两位数",
                    maxlength:"最多十位数字",
                    remote:"用户名不存在",
                    rangelength:"2-10个字符",
                    email:"请输入正确的邮箱地址",
                    url:"请输入正确的地址"
                },
                parseword:{
                    required:"必填",
                    minlength:"最少五位数",
                    maxlength:"最多十六位数字"
                },
                "confirm-parseword":{
                    equalTo:"密码不一致"
                },
                dates:{
                    required:"必填",
                    date:"请输入正确的有效日期",
                    dateISO:"错误"
                },
                emails:{
                    required:"必填",
                    email:"错误"
                },
                loads:{
                    required:"必填",
                    url:"错误"
                },
                numbers:{
                    required:"必填",
                    number:"错误",
                    digits:"非负整数"
                }
            },
            submitHandler:function(form){//表单验证成功之后执行的方法
                console.log($(form).serialize());
            },





            //错误信息在一个地方显示
            /*groups:{
                login:"usename parseword confirm-parseword"
            },
            //错误信息显示在........
            errorPlacement:function(error,element){
                error.insertBefore("#info");
            },*/


            //onsubmit:false,//是否在登录时进行验证默认 true;



            focusInvalid:true,//提交表单后,未通过验证的表单是否获得焦点





            //errorClass:"wrong",//验证错误定义的类名
            //validClass:"right",//验证正确定义的类名
            //errorContainer:"#info", //设置 info 显示还是隐藏
            //errorContainer:"#info2",
            //errorLabelContainer:"#info",// ul 再放入 info里面
            //errorElement:"li",  //错误信息使用的标签
            //wapper:"ul",//包裹错误信息使用的标签



            showErrors:function(errorMap,errorList){
                console.log(errorMap);
                console.log(errorList);
                this.defaultShowErrors();//不调用默认不显示错误信息
            },




            //针对验证 元素 label
            success:function(label){//验证成功之后给验证成功的元素添加类名
                label.addClass("successright");
            },


            //针对表单元素 给未通过验证的元素添加效果
            highlight:function(element, errorClass, validClass){
                $(element).addClass(errorClass).removeClass(validClass);
                $(element).fadeOut().fadeIn();
            },

            unhighlight:function(element, errorClass, validClass){
                $(element).addClass(validClass).removeClass(errorClass);
            },





            /*invalidHandler:function(event,validator){//表单验证失败之后执行的方法
                console.log("错误数" + validator.numberOfInvalids());
            }*/
            //ignore:"#usename"//对某些元素不进行校验
            //ignore:"hidden"  //默认不对影藏的元素校验

        });



        //自定义验证方法  邮政编码
        $.validator.addMethod("postcode" ,function(value, element, params){
            var postcode = /^[0-9]{6}$/;

            console.log(params);
            return this.optional(element) || (postcode.test(value));
            //this.optional(element) 去掉之后不填也会提示 请填写正确的邮政编码!!
            //this.optional(element) 值为空的时候不去触发校验规则
        }, $.validator.format("请填写正确的{0}邮政编码!!"));





        /*$("#demoForm").on("invalid-form", function(event,validator){//表单验证失败之后执行的方法
                console.log("错误数" + validator.numberOfInvalids());
            });*/



        //检测
        $("#check").click(function(){
            alert($("#demoForm").valid() ? "填写正确" : "填写错误");
        })
    })
</script>
</html>

 

以上是关于学习 表单验证插件validate的主要内容,如果未能解决你的问题,请参考以下文章

jQuery学习之路- 表单验证插件-Validation

jQuery学习之路- 表单验证插件-Validation

学习 表单验证插件validate

表单验证插件jquery.validate.js学习

表单验证提示插件validate

表单验证插件之jquery.validate.js