(Jquery功能篇) Jquery validate框架验证实例代码

第一步：加载相关的js文件

	<script type="text/javascript" src="js/jquery.validate.js"></script>

第二步：

	 $().ready(function() {  
		 $("#secondform").validate({   
          //规则  
            rules:{   
               xm:{   
                    required: true,   
                    minlength: 2,   
                    maxlength: 5   
                },   
                pwd:{   
                    required: true,   
                    minlength: 6   
                },   
                confirm_pwd:{   
                    required: true,   
                    equalTo: "#pwd"   
                },   
                f2csrq:{   
                    required: true,   
                    date: true   
                },   
                f2xjzd: {   
                    required: true     
                },   
                f2sfzh:{   
                    /*digits: true,   
                    rangelength: [18,20]*/   
                    required: true,   
                    isIdCardNo: true   
                }   
            },   
            //相关信息  
            messages:{   
                xm:{   
                    required: "请填写姓名",   
                    minlength: "字符长度不能小于2个字符",   
                    maxlength: "字符长度不能大于5个字符"   
                },   
                pwd:{   
                    required: "请填写密码",   
                    minlength: "字符长度不能小于6个字符"   
                },   
                confirm_pwd:{   
                    required: "请再次输入密码",   
                    equalTo: "密码不一致"   
                },   
                f2csrq:{   
                    required: "请输入出生日期",   
                    date: "日期格式不正确(例：2009/04/07)"   
                },   
                f2xjzd:{   
                    required: "请输入地址"      
                },   
                f2sfzh:{                                     
                    required: "请输入身份证号",   
                    isIdCardNo: "身份证号不正确"   
                }   
            } 
            
        			  
			 } 
 
 
 
        });  
		 
	}); 
        

第三步：jsp页面代码

<form id="secondform">       
    <fieldset>   
        <legend>自定义jQuery验证</legend>   
        <div id="xm" class="owinput">   
            <div class="owlabel">   
                <label class="req" for="xm"> 姓  名 :</label>   
            </div>   
            <div class="owfield">   
                <span class="inp"> <input name="xm" type="text"> </span>   
            </div>   
        </div>   
           
        <div id="xb" class="owinput">   
            <div class="owlabel">   
                <label class="req" for="pwd" > 密  码 :</label>   
            </div>   
            <div class="owfield">   
                <span class="inp"> <input id="pwd" name="pwd" type="password"> </span>   
            </div>   
        </div>   
           
        <div id="xb" class="owinput">   
            <div class="owlabel">   
                <label class="req" for="confirm_pwd"> 密码确认 :</label>   
            </div>   
            <div class="owfield">   
                <span class="inp"> <input name="confirm_pwd" type="password"> </span>   
            </div>   
        </div>   
           
        <div id="csrq" class="owinput">   
            <div class="owlabel">   
                <label class="req" for="f2csrq"> 出生日期 :</label>   
            </div>   
            <div class="owfield">   
                <span class="inp"> <input name="f2csrq" type="text"> </span>   
            </div>   
        </div>   
           
        <div id="xjzd" class="owinput">   
            <div class="owlabel">   
                <label class="req" for="f2xjzd"> 现居住地 :</label>   
            </div>   
            <div class="owfield">   
                <span class="inp"> <input value="" name="f2xjzd" type="text"> </span>   
            </div>   
        </div>   
           
        <div id="sfzh" class="owinput">   
            <div class="owlabel">   
                <label class="req" for="f2sfzh"> 身份证号 :</label>   
            </div>   
            <div class="owfield">   
                <span class="inp"> <input name="f2sfzh" type="text"> </span>   
            </div>   
        </div>      
    </fieldset>  
    </form>  

相关效果：