关闭

bootstrap-validator自定义验证

标签: bootstrapvalidator自定义验证开始日期结束日期比较
1557人阅读 评论(2) 收藏 举报
分类:
自定义验证
endTime: {
   validators: {
      notEmpty: {
         message: '请选择结束时间'
      },
                 callback: {
                     message: '结束日期不能小于开始日期',
                     callback:function(value, validator,$field){
                         if(scope.startTime==undefined||scope.endTime==undefined){
                             return true;
                         }
                         return new Date(scope.startTime).getTime()<=new Date(scope.endTime).getTime();
                     }
                 }
   }
}
编辑的时候,防止验证状态一直存在
$("#dataForm").bootstrapValidator('destroy');

提交的时候代码组合
$('#dataForm').data('bootstrapValidator').validate();
if(!$('#dataForm').data('bootstrapValidator').isValid()){
    return false;
}

完整demo

<!DOCTYPE html>
<html>
<head>
  <title>Using Ajax to submit data</title>

  <link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.css" rel="stylesheet">
  <link href="https://cdn.bootcss.com/jquery.bootstrapvalidator/0.5.3/css/bootstrapValidator.css" rel="stylesheet">
  <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.js"></script>
  <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.js"></script>
  <script src="https://cdn.bootcss.com/jquery.bootstrapvalidator/0.5.3/js/bootstrapValidator.js"></script>
</head>
<body>
<div class="container">
  <!-- class都是bootstrap定义好的样式,验证是根据input中的name值 -->
  <form id="defaultForm" method="post" class="form-horizontal" action="aaa.html">
    <!-- 下面这个div必须要有,插件根据这个进行添加提示 -->
    <div class="form-group">
      <label class="col-lg-3 control-label">Username</label>
      <div class="col-lg-5">
        <input type="text" class="form-control" name="username" />
      </div>
    </div>
    <div class="form-group">
      <label class="col-lg-3 control-label">Email address</label>
      <div class="col-lg-5">
        <input type="text" class="form-control" name="email" />
      </div>
    </div>
    <div class="form-group">
      <label class="col-lg-3 control-label">Password</label>
      <div class="col-lg-5">
        <input type="password" class="form-control" name="password" />
      </div>
    </div>
    <div class="form-group">
      <div class="col-lg-9 col-lg-offset-3">
        <button type="submit" class="btn btn-primary">Sign up</button>
      </div>
    </div>
  </form>
</div>
<script type="text/javascript">
  $(document).ready(function() {
    /**
     * 下面是进行插件初始化
     * 你只需传入相应的键值对
     * */
    $('#defaultForm').bootstrapValidator({
      message: 'This value is not valid',
      feedbackIcons: {/*输入框不同状态,显示图片的样式*/
        valid: 'glyphicon glyphicon-ok',
        invalid: 'glyphicon glyphicon-remove',
        validating: 'glyphicon glyphicon-refresh'
      },
      fields: {/*验证*/
        username: {/*键名username和input name值对应*/
          message: 'The username is not valid',
          validators: {
            notEmpty: {/*非空提示*/
              message: '用户名不能为空'
            },
            stringLength: {/*长度提示*/
              min: 6,
              max: 30,
              message: '用户名长度必须在6到30之间'
            },
            callback: {/*自定义,可以在这里与其他输入项联动校验*/
                 message: '只能是wm5920',
                 callback:function(value, validator,$field){
                     return value==='wm5920';
                 }
             }
          }
        },
        password: {
          message:'密码无效',
          validators: {
            notEmpty: {
              message: '密码不能为空'
            },
            stringLength: {
              min: 6,
              max: 30,
              message: '用户名长度必须在6到30之间'
            }
          }
        },
        email: {
          validators: {
            notEmpty: {
              message: 'The email address is required and can\'t be empty'
            },
            emailAddress: {
              message: 'The input is not a valid email address'
            }
          }
        }
      }
    });
  });
</script>
</body>
</html>
0
0
查看评论
发表评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场

bootstrapValidator 自定验证方法写法

//表单验证 issueInvoiceForm.validation = function(){ $('#issueInvoiceForm').on('init.field.bv', functi...
  • yueyeqingshan
  • yueyeqingshan
  • 2016-02-26 10:46
  • 21518

bootstrap-validator自定义验证规则,修改验证事件为blur

最近在研究bootstrap,感觉界面很漂亮,但是在做表单验证的时候所使用的是bootstrap-validator,这个插件什么都好,但是验证的是文本框的值改变的时候触发的,尤其ajax远程校验的时...
  • a349394
  • a349394
  • 2015-04-21 22:39
  • 11581

bootstrap-validator自定义验证规则,修改验证事件为blur

最近在研究bootstrap,感觉界面很漂亮,但是在做表单验证的时候所使用的是bootstrap-validator,这个插件什么都好,但是验证的是文本框的值改变的时候触发的,尤其ajax远程校验的时...
  • qq592304796
  • qq592304796
  • 2016-09-08 22:21
  • 3152

BootstrapValidator超详细教程

废话不多说,直接开始~一、引入必要文件下载地址:(https://github.com/nghuuphuoc/bootstrapvalidator/archive/v0.4.5.zip)
  • u013938465
  • u013938465
  • 2016-12-07 15:50
  • 51858

bootstrap表单校验之bootstrapvalidator

String path = request.getContextPath();     String basePath = request.getScheme() + "://"        ...
  • ntotl
  • ntotl
  • 2015-12-19 18:46
  • 3733

Bootstrapvalidator 前端自定义验证和ajax远程访问后端验证

概述Bootstrapvalidator是一款bootstrap风格的表单验证插件,拥有非常强大的验证功能,如果系统使用的是bootstrap,那么验证插件非此莫属。 Bootstrapvalida...
  • liuyuqin1991
  • liuyuqin1991
  • 2017-09-05 20:45
  • 753

【bootstrap】Bootstrap Validate表单验证神器

1、基本引用文件 //如果你想使用默认的语言包,请引入下面的文件 2、html代码 Username ...
  • yjqyyjw
  • yjqyyjw
  • 2016-06-16 11:17
  • 3694

bootstrapValidator自定义校验

见callback fields: { ... amount:{ validators:{ notEmpty: {message:...
  • zsg88
  • zsg88
  • 2017-05-21 21:00
  • 452

Bootstrapvalidator插件feedbackIcons的作用

一直不知道这一段代码中feedbackIcons是什么作用。 $("#mainForm").bootstrapValidator({ feedbackIcons : { valid : 'gly...
  • u011686226
  • u011686226
  • 2016-07-14 09:34
  • 2753

bootstrapValidator.js,最好用的bootstrap表单验证插件

本篇推荐一款twitter做的bootstrapValidator.js(最好用的bootstrap表单验证插件,没有之一),本身bootstrap就是twitter做的,那么使用原配的validat...
  • qing_gee
  • qing_gee
  • 2015-10-13 17:50
  • 50961
    个人资料
    • 访问:237274次
    • 积分:4115
    • 等级:
    • 排名:第8693名
    • 原创:149篇
    • 转载:78篇
    • 译文:0篇
    • 评论:43条
    全家桶
    心境
    • n年后的事情会是什么样子
    • 谁知道呢
    • 做好现在吧
    • 每天能进步一点
    • 你就应该满足了
    博客专栏