<!DOCTYPE html>

 <html>

 <head lang="en">

     <meta charset="UTF-8">

     <title>Jquery-validate插件</title>

  

    <script src="jquery.js"></script>

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

     <style>

         body{font-size: 36px;

             line-height: 1.6;

         }

         p{margin: 10px 0;}

         label{display:inline-block;min-width:140px;}

         label.error{margin-left: 10px;color: red}

         input,button{

             line-height: 35px;

             border: 1px solid #999;

             min-width: 180px;

         }  

         input.error{border: 1px solid red;}

         input[type=submit],button{

             margin-top: 20px;

             font-size: 36px;

             padding: 10px 0;

         }    

             

     

     </style>

  

 </head>

 <body>

     <form id="demoform">

         <legend>用户登录</legend>

         <p>

             <label for="username">用户名</label>

             

             <input type="text" name="username" id="username">

         </p>

     

           <p>

             <label for="password">密码</label>

             

             <input type="password" name="password" id="password">

         </p>

         <p>

             <label for="apassword">确认密码</label>

             

             <input type="password" name="apassword" id="apassword">

         </p>

         <p>

             <button id="checkbox">表单检查</button>

         </p>

         

         <input type="submit" value="登录">

     

     

     

     </form>

     

     <script>

         var validate;

         $(document).ready(function(){

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

             validate=$("#demoform").validate(

             {

                 

                 rules:{

                     //姓名

                     username:{

                         //required:true,第一种

                         required:{

                             depends:function(element){

                                 return $("#password").is(":filled");//这样用户名校验就看密码有没有填

                             }

                         },

                         minlength:2,

                         maxlength:10,

                         remote:"remote.json",

                     

                     },

                     //密码

                        password:{

                         required:true,

                         minlength:2,

                         maxlength:10,

                     

                     },//确认密码

                       apassword:{

                         equalTo:"#password",

                     

                     }

                     

                    

                 },

                    //MESSAGES

                     messages:

                 {

                     username:

                         {

                         required:"必须输入用户名",

                         minlength:"最小长度为2位",

                         maxlength:"最大长度为16位",

                         remote:"用户名不存在"

                     

                         },

                     //

                     password:

                         {

                         required:"必须输入密码",

                         minlength:"最小长度为2位",

                         maxlength:"最大长度为16位",

                     

                         },

                     apassword:{

                         equalTo:"两次密码要一致",

                     

                         }

                         

                 },

                 //MESSAGES 

                 //自定义配置项

                 //第一项

                     submitHandler:function(form){

                         console.log($(form).serialize());

                     },//第二项

                     invalidHandler:function(event,validator){

                         console.log("错误树"+validator.numberOfInvalids());

                 

                     },//第三项

                     //ignore:"username"

                 

             } )//validate()函数结束封尾

                 

             

         });//初始化页面默认加载结束

             //表单检查

                 $("#checkbox").click(function(){

                     alert($("#demoform").valid() ? "全部正确":"还是有错误");        

                 

             });

             

             

     

     

     

     

     </script>

  

 </body>

 </html>