form 表单jquery验证插件使用

第一部分：表单样式

<form action="#" method="post" id="regist">
   <table cellpadding="0" cellspacing="0" border="0" class="form_table">
      <tr>
         <td valign="middle" align="right">username</td>
         <td valign="middle" align="left"><input type="text" class="inputtgri" name="username" id="username"></td>
      </tr><br/>
      <tr>
         <td valign="middle" align="right">realname</td>
         <td valign="middle" align="left"><input type="text" class="inputtgri" name="name"></td>
      </tr><br/>
      <tr>
         <td valign="middle" align="right">pwd</td>
         <td valign="middle" align="left"><input type="password" class="inputtgri" name="pwd" id="pwd"></td>
      </tr><br/>
      <tr>
         <td valign="middle" align="right">repwd</td>
         <td valign="middle" align="left"><input type="password" class="inputtgri" name="repwd"></td>
      </tr><br/>
      <tr>
         <td valign="middle" align="right">age</td>
         <td valign="middle" align="left"><input type="text" class="inputtgri" name="age"></td>
      </tr><br/>
      <tr>
         <td valign="middle" align="right">phone</td>
         <td valign="middle" align="left"><input type="text" class="inputtgri" name="phone"></td>
      </tr><br/>
      <tr>
         <td valign="middle" align="right">email</td>
         <td valign="middle" align="left"><input type="text" class="inputtgri" name="email"></td>
      </tr><br/>
      <tr>
         <td valign="middle" align="right">code</td>
         <td valign="middle" align="left"><input type="text" class="inputtgri" name="code"></td>
      </tr><br/>
   </table>
   <p><input type="submit" class="button" value="Submit &raquo;"/>
   <input type="reset" class="button" value="Reset &raquo;">
   </p>
</form>

第二部分：头部引入js

<title>Welcome</title>
   <meta http-equiv="content-type" content="text/html;charset=utf-8"/>
   <script src="js/jquery-1.9.0.js"></script>
   <script src="js/jquery.validate.js"></script>
   <script src="js/jquery.validate.messages_cn.js"></script>

第三部分：验证

<script>
       $(function(){
         $("#regist").validate(
             {
                rules:{
                username:"required",
                name:"required",
                pwd:{required:true,rangelength:[6,10]},
                repwd:{required:true,equalTo:"#pwd"},
                age:{required:true,rangelength:[1,2]},
                phone:{required:true,rangelength:[5,20]},
                code:{required:true,},
                email:{required:true,email:true,},
                },
                messages:{
                   name:{required:"真实姓名不能为空"},
                   pwd:{required:"密码不能为空",rangelength:"密码必须6-10位"},
                   email:{required:"邮箱不能为空"},
                }
             }
         );
       })
   </script>