bootstrap-validator自定义验证

最新推荐文章于 2020-07-03 11:00:39 发布

球球之家/carver

最新推荐文章于 2020-07-03 11:00:39 发布

阅读量1.2w

点赞数 1

分类专栏：前端开发文章标签： bootstrap validator 自定义验证开始日期结束日期比较

本文链接：https://blog.csdn.net/wm5920/article/details/77188318

版权

前端开发专栏收录该内容

24 篇文章 0 订阅

订阅专栏

自定义验证
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>

球球之家/carver

关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
3
评论
bootstrap-validator自定义验证

自定义验证endTime: { validators: { notEmpty: { message: '请选择结束时间' }, callback: { message: '结束日期不能小于开始日期', callback:functio
复制链接

扫一扫