jq插件学习---validate 

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>validate</title>
        <script type="text/javascript" src="js/jquery-1.11.0.js" ></script>
        <script type="text/javascript" src="js/jquery.validate.js" ></script>
        <script type="text/javascript">
            
            $(function(){
                var vali=$("#testForm").validate({
                    rules:{
                        user:{
                            required:true,
//                            minlength:2,
//                            maxlength:10,
                            rangelength:[2,10],//长度范围
//                            remote:"jsonT/data.txt",//远程校验
//                            url:true,//url格式
//                            email:true,//邮箱格式
                            date:true,//日期格式
//                            dateISO:true,//标准日期格式yyyy-mm-dd 也可用/
//                            digits:true,//非负的整数
//                            number:true,
                        },
                        pass:{
                            required:true,
//                            minlength:2,
//                            maxlength:10,
//                            remote:{
//                                url:"",
//                                type:"post",
//                                data:{
//                                    
//                                }
//                            }
                        },
                        passre:{
                            equalTo:"#mima",//必须和谁相等
                        }
                    },
                    
                    messages:{
                        user:{
                            required:"必须填写用户名",
                            minlength:"用户名最小为2位",
                            maxlength:"用户名最大长度为10位"
                        },
                        pass:{
                            required:"必须填写密码",
                            minlength:"密码长度最小为2位",
                            maxlength:"密码长度最大为10"
                        }
                    }
                    
                });
                
                vali.showErrors({
                    pass:"你填错了",
                    user:"哟普你不用户名错了",
                })
                
                $("#check").click(function(){
                    alert($("#testForm").valid()?"填写正确":"填写错误");
                })
                
                
                
//                $("#mima").rules("add",{})//添加规则

                
                
                
            });
            
            
        </script>
    </head>
    <body>
        
        <form id="testForm">
            
            用户名<input type="text" placeholder="请输入用户名" name="user"/>
            密码<input type="password" id="mima" name="pass"/>
            确认密码<input type="password"  name="passre"/>
            <input type="submit" />
            <input type="button" id="check" />
        </form>
        
        
    </body>
</html>
posted @ 2016-11-03 17:59  T-tao  阅读(167)  评论(0)    收藏  举报