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

10 篇文章 0 订阅
5 篇文章 0 订阅

老规矩先上效果图
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


        }
  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值