bootstrap-validator实现验证表单

bootstrap-validator验证表单

本文需求是：点击自定义按钮后触发验证表单格式。使用验证方式是bootstrap-validator插件进行格式验证。下面代码放入对应地方可看见效果

首先需要引入资源 由于有用到bootstrap的一些样式说以也要引用一下bootstrap

<link href="./bootstrap/bootstrap-validator/css/bootstrapValidator.css" rel="stylesheet" />
<script src="./bootstrap/bootstrap-validator/css/bootstrapValidator.js"></script>

<link href="./bootstrap/bootstrap/js/bootstrap.css" rel="stylesheet" />
<script src="./bootstrap/bootstrap/js/bootstrap.min.js"></script>

html代码，结构说明：

最外层div为整个验证的范围，后面验证就是绑定在这个元素上，可以是div可以是form不影响 第二层div是必须的，嵌套需要验证的控件 input控件的name属性是验证规则的名字，验证规则在js代码中定义

<div id="form">
  <div class="form-group col-lg-4">
    <input class="form-control" type="text" name="appendant_name">
  </div>
</div>
<button type="button" id="addAppendant" class="btn btn-default">确认</button>

js代码，结构说明

formValidator()函数是自己定义的，此处表示直接调用，里面就是绑定验证的代码。基本不用修改，修改$("#form").bootstrapValidator自己定义绑定的id 函数中fields:表示规则定义，appendant_name这个对象表示是一个控件的验证，调用直接将这个key给到input的name属性。 fields里面主要定义message提示信息和validators，message是默认提示，validators是该控件需要同时进行多种验证后返回的，其返回的message可以替换默认。validators有许多封装好的，可以直接调用（后面罗列几个常用），或者自己写，自定义参考网上其他，我目前用网上的基本够用。或者可以直接写正则，基本一条正则就能解决所有你要的验证。添加正则格式在最下面有。

//初始化表单验证
  formValidator()
  /*手动验证表单，当是普通按钮时。*/
  $(#addAppendant).click(function (){
          
   
    $(#form).data(bootstrapValidator).validate();//启用验证
    let flag = $(#form).data(bootstrapValidator).isValid()
    console.log(flag)
  })




  //form验证规则
  function formValidator() {
          
   
    $("#form").bootstrapValidator({
          
            //formid
      message: This value is not valid,   //默认提示信息
      feedbackIcons: {
          
           //提示图标
        valid: glyphicon glyphicon-ok,
        invalid: glyphicon glyphicon-remove,
        validating: glyphicon glyphicon-refresh
      },
      fields: {
          
   
        appendant_name: {
          
   
          message: 名称验证失败,
          validators: {
          
   
          
            notEmpty: {
          
   
              message: 附属品名称不能为空
            },
            
            stringLength: {
          
   
              min: 1,
              max: 30,
              message: 附属品名称不能超过30个字
            }

          }
        },
       //...其他控件验证
      },
    })
  }

validators中的常见验证

notEmpty: {
          
   
   message: 帅哥不能为空
},
digits: {
          
   
  message: 该值只能包含数字。
},
 date: {
          
   
  format: YYYY/MM/DD,
  message: 日期无效
},
emailAddress: {
          
   
  message: 邮箱地址格式有误
},
regexp: {
          
   
  regexp: /^[A-Zs]+$/i,
  message: 名字只能由字母字符和空格组成。
},
stringLength: {
          
   
  min: 6,
  max: 30,
  message: 用户名长度不能小于6位或超过30位
},