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>

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>

posted on 2012-08-07 22:33 boonya 阅读(266) 评论(0) 编辑收藏举报