现在各大网站验证功能都必不可少，今天接触了一下jquery的验证插件。下面进行详细的说明
1、首先我们需要导入必要的js
2、jsp中form代码如下：
<form id="firstform" method="get" action="">
<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" class="required" minlength="2"> </span>
</div>
</div>
<div id="xb" class="owinput">
<div class="owlabel">
<label class="req" for="f1pwd"> 密 码 :</label>
</div>
<div class="owfield">
<span class="inp"> <input id="f1pwd" name="f1pwd" class="required" minlength="6"> </span>
</div>
</div>
<div id="xb" class="owinput">
<div class="owlabel">
<label class="req" for="f1pwd2"> 密码确认 :</label>
</div>
<div class="owfield">
<span class="inp"> <input value="" name="f1pwd2" type="text" class="required" equalTo="#f1pwd"> </span>
</div>
</div>
<div id="csrq" class="owinput">
<div class="owlabel">
<label class="req" for="f1csrq"> 出生日期 :</label>
</div>
<div class="owfield">
<span class="inp"> <input name="f1csrq" type="text" class="required date"> </span>
</div>
</div>
<div id="xjzd" class="owinput">
<div class="owlabel">
<label class="req" for="f1xjzd"> 现居住地 :</label>
</div>
<div class="owfield">
<span class="inp"> <input name="f1xjzd" type="text" class="required"> </span>
</div>
</div>
<div id="sfzh" class="owinput">
<div class="owlabel">
<label class="req" for="f1sfzh"> 身份证号 :</label>
</div>
<div class="owfield">
<span class="inp"> <input name="f1sfzh" type="text" class="required isIdCardNo" minlength="18" maxlength="19"> </span>
</div>
</div>
</fieldset>
<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 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>
3、编写jquery验证程序，jquery自定义验证程序如下
<script type="text/javascript">
$().ready(function() {
$("#firstform").validate();
$("#secondform").validate({
/*errorLabelContainer: "#messageBox", //显示错误信息的容器ID
wrapper: "li", //包含每个错误信息的容器*/
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: "身份证号不正确"
}
}
});
/*// 输入框获得焦点时，样式设置
$('input').focus(function(){
if($(this).is(":text") || $(this).is(":password"))
$(this).addClass('focus');
if ($(this).hasClass('have_tooltip')) {
$(this).parent().parent().removeClass('field_normal').addClass('field_focus');
}
});
// 输入框失去焦点时，样式设置
$('input').blur(function() {
$(this).removeClass('focus');
if ($(this).hasClass('have_tooltip')) {
$(this).parent().parent().removeClass('field_focus').addClass('field_normal');
}
});*/
});
</script>
4、成功界面如下：
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
