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

老规矩先上效果图
1
这里写图片描述
2
这里写图片描述

3
这里写图片描述
4
这里写图片描述

A两个input必须满足大于10;
B当输入其中一个input时,且满足A条件,如果另一个input为空,这个文本框通过;
C最小时长<最大时长;

html 片段

                            "min-width:325px;">
                                    <div class="input-group " >
                                        <div class="input-group-addon">最小时长div>
                                        "text" class="form-control" name="minTime"  placeholder="不得小于10分钟" />
                                        <div class="input-group-addon">分钟div>
                                    div>
                                
                                "min-width:325px;">

                                    <div class="input-group " >
                                        <div class="input-group-addon">最大时长div>
                                        "text" class="form-control" name="maxTime" placeholder="不得小于10分钟" />
                                        <div class="input-group-addon">分钟div>
                                    div>
                                

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


        }

你可能感兴趣的:(表单验证,html5,bootstrap,bootstrap,表单,validation)