为表单验证更加简便的validate.js

大家一定很熟悉jquery.js了,jquery使代码更加简洁。而validate.js是jquery团队开发的jquery.js的验证插件。

validate可以验证用户名，密码，确认密码。

//先写html表单

<form method="get" id="form">
            <p>
                <label for="">username:</label>
                <input type="text" name="user" id="user"/>
            </p>
            <p>
                <label for="">password:</label>
                <input type="text" name="pass" id="pass"/>
            </p>
            <p>
                <label for="">确认password:</label>
                <input type="text" name="pass1" id="pass1"/>
            </p>
            <!--<input type="submit" value="提交" id="btn"/>-->
        </form>

引入js文件:

　　　　　　　　$(function(){
                $('#form').validate({
                    rules:{//指的是input的name
                        user:{required:true,rangelength:[10,18]},//required:必填  rangelength:[10,18] 限制长度
                        pass:{required:true,rangelength:[10,18]},
                        pass1:{required:true,rangelength:[10,18],equalTo:'#pass'}
                        
                    },
                    messages:{
                        user:{required:"用户名必填",rangelength:"用户名必须在10-18位之间"},
                        pass:{required:"密码必填",rangelength:"密码必须在10-18位之间"},
                        pass1:{required:"密码必填",rangelength:"确认密码必须在10-18位之间",equalTo:"两次密码必须一样"}
                    },
                    ignore:'#pass1',//忽略某个元素不校验
                    submitHandler:function(){
                        alert('校验全通过')
                    },
                    invalidHandler:function(){
                        alert('no')
                    },
                    focusInvalid:true,
                    focusCleanup:true, //获得焦点
                    errorElement:"div",//把提示信息的父节点变成div
                    errorClass:"wrong",//验证不通过的样式//字体变红
                })
            });

其实还可以自动义验证规则：自定义名在调用到需要验证的那个元素里，true默认值

$.validator.addMethod('PostCode',function(value){
                　　//自定义规则名
     var reg=/^[0-9]{6}$/;
     return reg.test(value);
},'必须是邮编格式的！');

好了，validator介绍到这里，如果有不懂的问题，请留言。谢谢