您的位置:首页 > Web前端 > BootStrap

Bootstrap 表单验证formValidation 之比较两个input值的大小

2017-06-02 10:01 561 查看
老规矩先上效果图

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

}
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息