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>
1
2
3
4
5

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>
1
2
3
4
5
6

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个字'
            }

          }
        },
       //...其他控件验证
      },
    })
  }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43

validators中的常见验证

notEmpty: {
   message: '帅哥不能为空'
},
digits: {
  message: '该值只能包含数字。'
},
 date: {
  format: 'YYYY/MM/DD',
  message: '日期无效'
},
emailAddress: {
  message: '邮箱地址格式有误'
},
regexp: {
  regexp: /^[A-Z\s]+$/i,
  message: '名字只能由字母字符和空格组成。'
},
stringLength: {
  min: 6,
  max: 30,
  message: '用户名长度不能小于6位或超过30位'
},
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22