bootstrap 表单验证神器 bootstrapValidator

引入BootstrapValidator插件

  BootstrapValidator插件依赖于 jQuery 和 Bootstrap 3 (所以之前要引入jQuery 和 Bootstrap 3)
  引入 js 和 css 文件

<link href="https://cdn.bootcss.com/jquery.bootstrapvalidator/0.5.3/css/bootstrapValidator.min.css" rel="stylesheet">
<script src="https://cdn.bootcss.com/jquery.bootstrapvalidator/0.5.3/js/bootstrapValidator.min.js"></script>

使用

如果想对某一个字段添加验证规则，需要<div class=“form-group”>包裹，input标签必须有name值，此值为验证匹配的字段。其实就是要符合bootstrap表单结构

<!-- html -->
<form>
  <div class="form-group">
    <label for="uname">姓名:</label>
    <input type="text" class="form-control" id="uname" name="uname">
  </div>
  <div class="form-group">
    <label for="phone">电话:</label>
    <input type="text" class="form-control" id="phone" name="phone">
  </div>
</form>
<button class="post-btn btn btn-primary">点击提交</button>

<!-- 如果是 输入框组  input-group ，外层也要包裹 一个 form-group -->
<form>
  <div class="form-group">
    <div class="input-group">
      <span class="input-group-addon">手机号码</span>
      <input name="phone" id="phone" type="text" class="form-control" placeholder="请填写真实的联系方式">
    </div>
  </div>
</form>

$('form').bootstrapValidator({
    // 默认的提示消息
    message: 'This value is not valid',
    // 表单框里右侧的icon
    feedbackIcons: {
      　　　　　　　　valid: 'glyphicon glyphicon-ok',
      　　　　　　　　invalid: 'glyphicon glyphicon-remove',
      　　　　　　　　validating: 'glyphicon glyphicon-refresh'
    },
    //定义验证规则
    fields: {
      uname: {		//填写 name 属性为 uname 的验证规则
        message: '用户名验证失败',
        validators: {
          notEmpty: {
            message: '用户名不能为空'
          },
          stringLength: {  //长度限制
            min: 6,
            max: 18,
            message: '用户名长度必须在6到18位之间'
          },
          regexp: { //正则表达式
            regexp: /^[a-zA-Z0-9_]+$/,
            message: '用户名只能包含大写、小写、数字和下划线'
          },
          different: {  //比较
            field: 'username', //需要进行比较的input name值
            message: '密码不能与用户名相同'
          },
          identical: {  //比较是否相同
            field: 'password',  //需要进行比较的input name值
            message: '两次密码不一致'
          },
          remote: { // ajax校验，获得一个json数据（{'valid': true or false}）
            url: 'user.php',       //验证地址
            message: '用户已存在',   //提示信息
            type: 'POST',          //请求方式
            data: function(validator){  //自定义提交数据，默认为当前input name值
              return {
                act: 'is_registered',
                username: $("input[name='username']").val()
              };
            }
          }
        }
      },
      phone: {		//填写 name 属性为 phone 的验证规则
        validators: {
          notEmpty: {
            message: '电话号码不能为空'
          },
          regexp: { //正则表达式
          	regexp: /^1[35789]\d{9}$/,
           	message: '请填写正确的手机号码'
          }
        }
      }
    }
});

// 可以自定义通过 ajax 请求,把submit改成 button ; 然后给button绑定事件；
$('.post-btn').click(function(){
  $('form').bootstrapValidator('validate');		//触发表单验证
  let res = $('form').data("bootstrapValidator").isValid();
  if(res) {
  	//验证规则通过后执行代码
  }
})