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

最新推荐文章于 2023-02-12 12:12:27 发布

原创最新推荐文章于 2023-02-12 12:12:27 发布 · 1.3w 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#bootstrap #表单 #validation

html5 同时被 3 个专栏收录

44 篇文章

订阅专栏

bootstrap

10 篇文章

订阅专栏

表单验证

5 篇文章

订阅专栏

本文介绍了一个使用JavaScript实现的表单验证案例，确保两个输入框分别代表的最小时长和最大时长符合特定规则：大于10分钟且前者小于后者。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

 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


        }