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

忘是亡心i 2023-10-18 22:46 96阅读 0赞

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

第二步：

$().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>