jQuery 切换radio 改变validateRule的校验规则
有这样一个form表单，在切换费率类型时，需要校验不同input框如下图
静态页面代码如下：
<div class="ibox-content">
<form class="form-horizontal m-t" id="signupForm">
<input id="userId" name="userId" th:value="${userId}" class="form-control" type="hidden">
<div class="form-group">
<label class="col-sm-3 control-label">代理id：<span style="color:red">*</span></label>
<div class="col-sm-8">
<input id="agentId" name="agentId" class="form-control" type="text">
</div>
</div>
<div class="form-group">
<label class="col-sm-3 control-label">产品：<span style="color:red">*</span></label>
<div class="col-sm-8">
<!-- <input id="productCode" name="productCode" class="form-control" type="text"> -->
<select data-placeholder="选择产品" name="productCode" id="productCode"
class="form-control chosen-select" tabindex="2"
style="width: 100%">
<option value="">选择产品</option>
</select>
</div>
</div>
<div class="form-group">
<label class="col-sm-3 control-label">费率类型:</label>
<div class="col-sm-8" >
<!-- <input id="feeType" name="feeType" class="form-control" type="text"> -->
<label class="radio-inline"> <input type="radio"
name="feeType" value="0" checked="true"/> 比例
</label> <label class="radio-inline"> <input type="radio"
name="feeType" value="1" /> 固定值
</label>
</div>
</div>
<div class="form-group" id="feeshow">
<label class="col-sm-3 control-label">固定费率 （分 ）：<span style="color:red">*</span></label>
<div class="col-sm-8">
<input id="fee" name="fee" class="form-control" type="text">
</div>
</div>
<div class="form-group" id="feeRateshow">
<label class="col-sm-3 control-label">费率（‰） ：<span style="color:red">*</span></label>
<div class="col-sm-8">
<input id="feeRate" name="feeRate" class="form-control" type="text">
</div>
</div>
<div class="form-group">
<div class="col-sm-8 col-sm-offset-3">
<button type="submit" class="btn btn-primary">提交</button>
</div>
</div>
</form>
</div>
我们可以考虑在切换radio时显示一个div并且隐藏另外一个div
首先获取radio的值：var feeType = $('input[name="feeType"]:checked').val();
为两个div分别设置id，
在切换时进行显示和隐藏：
if(feeType == 0){
$("#feeshow").hide();
$("#feeRateshow").show();
}
if(feeType == 1){
$("#feeRateshow").hide();
$("#feeshow").show();
}
最关键的，radio切换校验规则validateRule的问题
开始有几种方案：
（1）写两个validateRule，1和2，1中校验feeRate，2中校验fee，feeType==0使用规则1，feeType==1使用规则2
尝试之后发现规则1和规则2虽然可以进去，但是校验规则使用的还是初始进去的校验规则，即规则1
（2）不区分校验规则，在validateRule中分情况1和2，分别对feeRate和fee进行校验，依然没有效果
（3）最后，使用了jquery validate 动态添加校验规则的方案
validateRule中对除了feeRate和fee之外的所有input框进行校验
function validateRule() {
var icon = "<i class='fa fa-times-circle'></i> ";
$("#signupForm").validate({
ignore: "" ,
errorPlacement: function(error, element) {
if (element[0].tagName === 'SELECT'){
error.insertAfter($(element[0].nextElementSibling));
}else {
error.insertAfter(element);
}
} ,
rules : {
agentId : {
required : true,
digits : true,
remote : {
url : "/agent/agentFee/agentId_validate", // 后台处理程序
type : "post", // 数据发送方式
dataType : "json", // 接受数据格式
data : { // 要传递的数据
agentId : function() {
return $("#agentId").val();
},
}
}
},
productCode : {
required : true,
remote : {
url : "/agent/agentFee/agentFeeNoExist", // 后台处理程序
type : "get", // 数据发送方式
dataType : "json", // 接受数据格式
data : { // 要传递的数据
productCode : function() {
return $("#productCode").val();
},
agentId : function() {
return $("#agentId").val();
},
}
}
}
},
messages : {
agentId : {
required : icon + "请输入代理号",
digits : icon + "请输入正确的代理号（数字）",
remote : icon + "请输入正确的代理号（不能是自己）",
},
productCode : {
required : icon + "请选择产品",
remote: icon + "产品已经存在"
}
}
})
}
而在切换radio时动态地添加校验规则
function feeRadioChange(){
var feeType = $('input[name="feeType"]:checked').val();
if(feeType == 0){
$("#feeshow").hide();
$("#feeRateshow").show();
validateRule();
var icon = "<i class='fa fa-times-circle'></i> ";
$("#fee").rules("remove");
$("#feeRate").rules("add", {
required : true,
number : true,
maxlength : 8,
remote : {
url : "/agent/agentFee/add_fr_validate", // 后台处理程序
type : "post", // 数据发送方式
dataType : "json", // 接受数据格式
data : { // 要传递的数据
feeRate : function() {
return $("#feeRate").val();
},
productCode : function() {
return $("#productCode").val();
},
}
},
messages : {
required : icon + "请输入费率（‰）",
number : icon + "请输入正确的费率（数字）",
maxlength : icon + "不能超过8位",
remote : icon + "上级代理必须有该产品费率,代理费率必须大于上级代理"
}
});
}
if(feeType == 1){
$("#feeRateshow").hide();
$("#feeshow").show();
validateRule();
var icon = "<i class='fa fa-times-circle'></i> ";
$("#feeRate").rules("remove");
$("#fee").rules("add", {
required : true,
digits : true,
max : 1500,
messages : {
required : icon + "请输入固定费率（分）",
digits : icon + "请输入正确的费率（数字）",
max : icon + "不能超过1500"
}
});
}
}
注意：需要在调用了validateRule()之后才能动态添加校验规则！！