`
kiddsunhaibo1
  • 浏览: 97153 次
  • 性别: Icon_minigender_1
  • 来自: 南京
社区版块
存档分类
最新评论

jQuery validate form 表单的验证

    博客分类:
  • web
阅读更多
利用jQuery中的validate的控件进行表单的验证,导入jquery.validate.js,jquery.js这两个js,附上如下的代码,你懂的:

$().ready(function() {
$("#firstform").validate();

$("#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:{
/*digits: "身份证号码只能为数字",
rangelength: "身份号码长度为18~20个字符"*/
required: "请输入身份证号",
isIdCardNo: "身份证号不正确"
}
}
});


<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="text"> </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="text"> </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>
    <div id="messageBox"></div>
    <div id="regSubmit">
        <span id="btnCreate" class="regBtn" onmouseover="btncreatehover(this);" onmouseout="btncreateout(this);">
            <b class="tl"><b class="tr"></b></b><button id="send" type="submit">提  交</button><b class="bl"><b class="br"></b></b>
        </span>
        <span id="btnCancel" class="cancelBtn" onmouseover="btncancelhover(this);" onmouseout="btncancelout(this);">
            <b class="tl"><b class="tr"></b></b><button id="cancelBtn" type="button">取  消</button><b class="bl"><b class="br"></b></b>
        </span>
    </div>
</form>

在form表单提交的时候可以通过
$.validator.setDefaults({
submitHandler: function(form) {
form.submit();
alert("submitted!"); }
});
来实现请求的发送
分享到:
评论

相关推荐

Global site tag (gtag.js) - Google Analytics