JavaScript表单验证jquery.validate插件

前言：不练兵，不足以御来犯之敌。久了不碰就会生疏，所以又在这里记忆一遍。

1、JSP静态代码
<form action="#" method="post"  id="regist">
     <table cellpadding="0" cellspacing="0" border="0" class="form_table">
         <tr>
             <td valign="middle" align="right">用户名:</td>
             <td valign="middle" align="left"> <input type="text" class="inputgri" name="username" id="username" /> </td>
         </tr>
         <tr>
            <td valign="middle" align="right">真实姓名:</td>

             <td valign="middle" align="left"> <input type="text" class="inputgri" name="name" /> </td>
         </tr>

            <tr>
             <td valign="middle" align="right">密码:</td>
             <td valign="middle" align="left"> <input type="password" class="inputgri" name="pwd"  id="pwd"/> </td>
         </tr>
         <tr>
             <td valign="middle" align="right">重复密码:</td>
             <td valign="middle" align="left"> <input type="password" class="inputgri" name="repwd"/> </td>
         </tr>
         <tr>
             <td valign="middle" align="right">年龄:</td>
             <td valign="middle" align="left"> <input type="text" class="inputgri" name="age" /> </td>
         </tr>
         <tr>
             <td valign="middle" align="right">电话:</td>
             <td valign="middle" align="left"> <input type="text" class="inputgri" name="phone" /> </td>
        </tr>
        <tr>
             <td valign="middle" align="right">电子邮件:</td>
             <td valign="middle" align="left"> <input type="text" class="inputgri" name="email" /> </td>
         </tr>
         <tr>
             <td valign="middle" align="right">验证码:</td>
             <td valign="middle" align="left"> <input type="text" class="inputgri" name="number" /> </td>
                 </tr>
     </table>
     <p> <input type="submit" class="button" value="Submit &raquo;" />  <input type ="reset" class = "button"  value = "Reset &raquo;"> </p>
  </form>

2、外部JS文件
<script type="text/javascript" src="js/jquery-1.4.min.js"></script>
<script type="text/javascript" src="js/jquery.validate.js"></script>
<script type="text/javascript" src="js/jquery.validate.messages_cn.js"></script>
3、研究代码
       <script type="text/javascript">
         //表单填写情况校验
         $(function(){ //代表页面加载以后执行
             $("#regist").validate( //此处的#regist是JQuery的选择器，代表了校验id为regist的Form
             {
                 rules: {//此处开始配置校验规则，下面会列出所有的校验规则
                     username : "required",
                     name : "required",
                     pwd : {required:true,rangelength:[6,10]},
                     repwd : {required:true,equalTo:"#pwd"}, //需要和id=pwd元素对应
                     age : {required:true,rangelength:[1,2]},
                     phone:{required:true,rangelength:[5,20]},
                     number:{required:true,},
                     email: {required:true,email: true,},
                 },
                 messages:{//自定义提示信息
                     name:{required:"真实姓名不能为空!"},
                     pwd:{required:"密码不能为空!",rangelength:"密码必须在6-10位!"},
                     email:{required:"电子邮箱不能为空!"},
                 }
             }
         );
         });
 </script>