进行开发的时候，遇到了需要有多个规则来校验，如新用户过来一套校验规则，老用户过来又是一套规则，这时候就要需要定义多套校验规则。
首先要熟悉Bootstrap和Jquery validate的使用，详情请参考Bootstrap 与 Jquery validate 结合使用——简单实现
然后开始进入正题。
基本的东西不变，只需要给form表单绑定不同的规则，自己定义几套规则即可。
（本人亲自尝试了多种方法，发现Jquery validate的校验规则只能在$(function(){})即网页加载完毕后才能绑定校验规则，不能动态的去更改绑定。即通过一个触发事件重新绑定新的校验规则）
给每个form表单绑定校验规则，根据业务显示对应的form表单即可
/* 表单数据校验 start */
//设置默认值
$.validator.setDefaults({
errorElement : 'span',
errorClass : 'help-block',
debug: false, //调试模式取消submit的默认提交功能
focusInvalid: false, //当为false时，验证无效时，没有焦点响应
submitHandler: function(form){//表单提交句柄,为一回调函数，带一个参数：form
var datas = stitchParameter();
if(paycount == 90){
$(form).ajaxSubmit({
type : "POST",
dataType : "json",
async : false,
data : {"encrypt" : SecUtil.encrypt(datas,_keyPair)},
url : HOSTPATH+"/pay/unionPay",
success:function( jsondata ){
if( jsondata.meta.code == 'S002' ){
//数据处理
$(".tab-pane").removeClass("in").removeClass("active");
$("#pay-successful").addClass("in").addClass("active");
}else{
alert(jsondata.meta.message);
//数据处理
$(".tab-pane").removeClass("in").removeClass("active");
$("#pay-failure").addClass("in").addClass("active");
}
}
});
//开始计时
var paytimer = setInterval(function(){
paycount--;
if(paycount == 0){
clearInterval(paytimer);
paycount = 90;
}else{
if(payflag==1){
clearInterval(paytimer);
}
}
},1000);
}else{ }
}, //自定义错误消息放到哪里
errorPlacement : function(error, element) {
//区分普通输入框和输入框组，如果直接用element.next().remove();会错误删除标签（即输入框组的<span class="input-group-addon"></span>）
element.nextUntil(".input-group-addon").remove();
//element.next().remove();//删除显示图标
element.after('<span class="glyphicon glyphicon-remove form-control-feedback" aria-hidden="true"></span>');
element.closest('.form-group').append(error);//显示错误消息提示
},
//给未通过验证的元素进行处理
highlight : function(element) {
$(element).closest('.form-group').addClass('has-error has-feedback');
},
//验证通过的处理
success : function(label) {
var el=label.closest('.form-group').find("input");
//区分普通输入框和输入框组，如果直接用el.next().remove();会错误删除标签（即输入框组的<span class="input-group-addon"></span>）
el.nextUntil(".input-group-addon").remove();
//el.next().remove();//删除显示图标
el.after('<span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>');
label.closest('.form-group').removeClass('has-error').addClass("has-feedback has-success");
label.remove();
},
});
//新数据校验规则
var newRules={
rules:{
new_name:{
required : true,
minlength : 2
},
new_idCard:{
required : true,
isIdCardNo : true },
new_phone:{
required : true,
mobile : true
},
new_cardNo:{
required : true,
FixedLength : 16
},
new_cvn:{
required : true,
FixedLength : 3, },
new_verifyCode:{
required : true,
FixedLength : 4,
checkVerifyCode : true
},
new_expDate:{
required:true,
date : true
}
},
messages:{
new_name:{
required : "请输入姓名",
minlength : "请输入正确的姓名"
},
new_idCard:{
required : "请输入身份证号"
},
new_phone:{
required : "请输入手机号码"
},
new_cardNo:{
required :"请输入银行信用卡",
FixedLength : "请输入正确的银行信用卡"
},
new_cvn:{
required : "请输入CVN",
FixedLength : "请输入3位的CVN"
},
new_verifyCode:{
required : "请输入验证码",
FixedLength : "请输入有效的验证码",
},
new_expDate:{
required : "请输入有效日期"
}
},
};
//旧数据校验规则
var oldRules={
rules:{
old_cvn:{
required : true,
FixedLength : 3, },
old_verifyCode:{
required : true,
FixedLength : 4,
checkVerifyCode : true
}
},
messages:{
old_cvn:{
required : "请输入CVN",
FixedLength : "请输入3位的CVN"
},
old_verifyCode:{
required : "请输入验证码",
FixedLength : "请输入有效的验证码",
}
},
};
//生成校验规则
var validate_new = jQuery.extend({}, $.validator.defaults, newRules);
var validate_old = jQuery.extend({}, $.validator.defaults, oldRules);
//表单绑定校验#userPay-old
$("#userPay-new").validate(validate_new);
$("#userPay-old").validate(validate_old);
/* 表单数据校验 end */
对应的页面文件
<!-- 新数据表单 -->
<form id="userPay-new">
<table>
<tr>
<td>
<div class="form-group">
<label for="dtp_input3" class="label-title control-label">姓名：</label>
<div class="input-group input-div">
<input id="new_name" name="new_name" class="form-control readonly-input" size="16" type="text" value="">
</div>
</div>
</td>
<td class="float-td">
<div class="form-group">
<label for="dtp_input3" class="label-title control-label">身份证：</label>
<div class="input-group input-div">
<input id="new_idCard" name="new_idCard" class="form-control readonly-input" size="16" type="text" value="">
</div>
</div>
</td>
</tr>
<tr>
<td>
<div class="form-group">
<label for="dtp_input3" class="label-title control-label">手机：</label>
<div class="input-group input-div">
<input id="new_phone" name="new_phone" class="form-control readonly-input" size="16" type="text" value="">
</div>
</div>
</td>
</tr>
<tr>
<td>
<div class="form-group bank-card-div">
<label for="dtp_input3" class="label-title control-label">银行卡：</label>
<div class="input-group date input-div">
<span class="caret"></span>
<input id="new_cardNo" name="new_cardNo" class="form-control dropdown-toggle" data-toggle="dropdown" size="16" type="text" value=""/>
<!-- <span class="input-group-addon" data-toggle="dropdown">
<span class="glyphicon glyphicon glyphicon-arrow-down"></span>
</span> -->
<span class="input-group-addon addCard">
<span class="glyphicon glyphicon glyphicon-plus"></span>
</span>
<ul class="userCards dropdown-menu">
<!-- <li role="presentation"><span>信用卡（7757）</span><a href="#">删除</a></li>
<li role="presentation" class="divider"></li>
<li role="presentation"><span onclick="javascript: selectCard(this);">信用卡（7757）</span><a href="#" onclick= "return ">删除</a></li>
<li role="presentation" class="divider"></li>
<li role="presentation"><span onclick="javascript: selectCard(this);">信用卡（7757）</span><a href="#" onclick= "return ">删除</a></li>
<li role="presentation" class="divider"></li>
<li role="presentation"><span onclick="javascript: selectCard(this);">信用卡（7757）</span><a href="#" onclick= "return ">删除</a></li> -->
</ul>
</div>
</div>
</td>
<td class="float-td">
<div class="form-group">
<label for="dtp_input3" class="label-title control-label">CVN：</label>
<div class="input-group input-div">
<input id="new_cvn" name="new_cvn" class="form-control" size="3" type="text" value="">
</div>
</div>
</td>
</tr>
<tr>
<td>
<div class="form-group verify-code-div">
<label for="dtp_input3" class="label-title control-label">验证码：</label>
<div class="input-group input-div">
<input id="new_verifyCode" name="new_verifyCode" class="form-control" data-toggle="dropdown" size="16" type="text" value="">
<span class="input-group-addon verify-code-span"><a class="btn btn-primary verify-code-a">获取验证码</a></span>
</div>
</div>
</td>
<td class="float-td">
<div class="form-group exp-date-div">
<label for="dtp_input2" class="label-title control-label">有效期：</label>
<div class="datepicker input-group date form_date input-div">
<input id="new_expDate" name="new_expDate" class="form-control" data-toggle="dropdown" size="16" type="text" value="" readonly>
<span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span></span>
</div>
</div>
</td>
</tr>
</table>
<input id="submit-btn-inner" class="btn btn-primary submit-button" data-loading-text="正在提交" type="submit" value="确认支付"/>
</form>
<!-- 旧数据表单 -->
<form id="userPay-old" style="display: none;">
<table>
<tr>
<td>
<div class="form-group">
<label for="dtp_input3" class="label-title control-label">姓名：</label>
<div class="input-group input-div">
<input id="old_name" name="old_name" class="form-control readonly-input" size="16" type="text" value="">
</div>
</div>
</td>
<td class="float-td">
<div class="form-group">
<label for="dtp_input3" class="label-title control-label">身份证：</label>
<div class="input-group input-div">
<input id="old_idCard" name="old_idCard" class="form-control readonly-input" size="16" type="text" value="">
</div>
</div>
</td>
</tr>
<tr>
<td>
<div class="form-group">
<label for="dtp_input3" class="label-title control-label">手机：</label>
<div class="input-group input-div">
<input id="old_phone" name="old_phone" class="form-control readonly-input" size="16" type="text" value="">
</div>
</div>
</td>
</tr>
<tr>
<td>
<div class="form-group bank-card-div">
<label for="dtp_input3" class="label-title control-label">银行卡：</label>
<div class="input-group date input-div">
<span class="caret"></span>
<input id="old_cardNo" name="old_cardNo" class="form-control dropdown-toggle readonly-input" data-toggle="dropdown" size="16" type="text" value="" readonly/>
<!-- <span class="input-group-addon" data-toggle="dropdown">
<span class="glyphicon glyphicon glyphicon-arrow-down"></span>
</span> -->
<span class="input-group-addon addCard">
<span class="glyphicon glyphicon glyphicon-plus"></span>
</span>
<ul class="userCards dropdown-menu" aria-labelledby="old_cardNo">
<!-- <li role="presentation"><span>信用卡（7757）</span><a href="#">删除</a></li>
<li role="presentation" class="divider"></li>
<li role="presentation"><span onclick="javascript: selectCard(this);">信用卡（7757）</span><a href="#" onclick= "return ">删除</a></li>
<li role="presentation" class="divider"></li>
<li role="presentation"><span onclick="javascript: selectCard(this);">信用卡（7757）</span><a href="#" onclick= "return ">删除</a></li>
<li role="presentation" class="divider"></li>
<li role="presentation"><span onclick="javascript: selectCard(this);">信用卡（7757）</span><a href="#" onclick= "return ">删除</a></li> -->
</ul>
</div>
</div>
</td>
<td class="float-td">
<div class="form-group">
<label for="dtp_input3" class="label-title control-label">CVN：</label>
<div class="input-group input-div">
<input id="old_cvn" name="old_cvn" class="form-control" size="3" type="text" value="">
</div>
</div>
</td>
</tr>
<tr>
<td>
<div class="form-group verify-code-div">
<label for="dtp_input3" class="label-title control-label">验证码：</label>
<div class="input-group input-div">
<input id="old_verifyCode" name="old_verifyCode" class="form-control" data-toggle="dropdown" size="16" type="text" value="">
<span class="input-group-addon verify-code-span"><a class="btn btn-primary verify-code-a">获取验证码</a></span>
</div>
</div>
</td>
<td class="float-td">
<div class="form-group exp-date-div">
<label for="dtp_input2" class="label-title control-label">有效期：</label>
<div class="datepicker input-group date form_date input-div">
<input id="old_expDate" name="old_expDate" class="form-control readonly-input" data-toggle="dropdown" size="16" type="text" value="" >
<span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span></span>
</div>
</div>
</td>
</tr>
</table>
<input id="submit-btn-inner" class="btn btn-primary submit-button" data-loading-text="正在提交" type="submit" value="确认支付"/>
</form>
结果可行。
如有更加好的方法，请留言。本来小菜一枚，如有不足之处，请多多指教！