老规矩先上效果图
1
2
3
4
A两个input必须满足大于10;
B当输入其中一个input时,且满足A条件,如果另一个input为空,这个文本框通过;
C最小时长<最大时长;
html 片段
<td style="min-width:325px;">
<div class="input-group " >
<div class="input-group-addon">最小时长</div>
<input type="text" class="form-control" name="minTime" placeholder="不得小于10分钟" />
<div class="input-group-addon">分钟</div>
</div>
</td>
<td style="min-width:325px;">
<div class="input-group " >
<div class="input-group-addon">最大时长</div>
<input type="text" class="form-control" name="maxTime" placeholder="不得小于10分钟" />
<div class="input-group-addon">分钟</div>
</div>
</td>
js
var fields={};
fields. minTime=toGreaterThan("maxTime")
fields. maxTime=toGreaterThan("minTime")
$('#defaultForm').formValidation({
message: '此值无效',
row: {
selector: 'td'
},
icon: {
valid: 'glyphicon glyphicon-ok',
invalid: 'glyphicon glyphicon-remove',
validating: 'glyphicon glyphicon-refresh'
},
locale: 'zh_CN',
fields:fields,
})
function toGreaterThan(box){
var obj={
verbose: false,
validators: {
notEmpty: {
message: '这是必填字段'
},
digits: {
message: '值必须是整数'
},
greaterThan: {
value: 10,
message: '必须大于10'
},
callback: {
message: '最小时长必须小于最大时长',
callback: function(value, validator, $field) {
var otherbox = validator.getFieldElements(box).val();//获得另一个的值
if (otherbox == '' ) {
return true;
}
if(box=="minTime"){
if (parseInt(otherbox)<parseInt(value)) {
//当前文本框满足条件,box的文本框也满足条件,更新box文本框的状态;
validator.updateStatus(box, validator.STATUS_VALID, 'callback');
return true;
}
}else{
if (parseInt(otherbox)>parseInt(value)) {
//当前文本框满足条件,box的文本框也满足条件,更新box文本框的状态;
validator.updateStatus(box, validator.STATUS_VALID, 'callback');
return true;
}
}
return false;
}
}
}
}
return obj
}