bootstrapValidator表单校验插件使用教程

前期准备

因为bootstrapValidator插件是基于jquery和bootstrap的，所以需要引入jquery和bootstrap对应的js和css文件。

文件引入

1.Jquery

Jquery.js
Jquery.css

2.Bootstrap

Bootstrap.js
Bootstrap.css

3.bootstrapValidator

bootstrapValidator.js
bootstrapValidator.css

注意本次插件引入的是bootstrapValidator插件，而不是bootstrap-validator这两个插件的关系还搞清楚，bootstrapValidator插件中的方法是$('#tmplForm').bootstrapValidator({})lai初始化校验，而bootstrap-validator中是另一个方法。

插件使用

对应的文件引入之后，就可以使用插件了，这是官方API网址：http://bootstrapvalidator.votintsev.ru/api/

添加检验

1.普通节点添加校验

$(function(){/* 初始化*/
 $('#formId').bootstrapValidator({
     excluded: [":hidden", ":disabled"], //[':disabled', ':hidden', ':not(:visible)'] //设置隐藏组件可验证
     feedbackIcons: {
         valid: 'glyphicon glyphicon-ok',//检验时表单显示对勾或叉
         invalid: 'glyphicon glyphicon-remove',
         validating: 'glyphicon glyphicon-refresh'
     },
     //添加验证
     fields: {
         //可以通过input的name属性，为其添加校验(name='username')
         username: {
             \\验证规则
             validators: {
                 //非空验证
                 notEmpty: {
                     message: '用户名不能为空'
                 }，
                 stringLength: {
                     min: 6,
                     max: 30,
                     message: '用户名长度必须在6到30之间'
                 },
             }
         },
         //可以通过input的name属性，为其添加校验(name='admin.username')
         'admin.username': {//如果name中包含"."，则需要打上引号
             \\验证规则
             validators: {
                 //非空验证
                 notEmpty: {
                     message: '用户名不能为空'
                 }
             }
         },
         //可以通过input的id，为其添加校验(id='password')
         password: {//这个地方的名字似乎可以自定义
             selector: '#password',
             validators: {
                 notEmpty: {
                     message: '密码不能为空'
                 }
             }
         }
     }
 })

其他节点都可以通过name或者id添加校验。

2.动态节点添加校验

 $('#formId').bootstrapValidator('addField', 'admin.username', {
        validators: {
            notEmpty: {
                message: '管理员名称不能为空'
            }
        }
}); //给动态生成的元素增加校验（开启校验）

'addField'是bootstrapValidator的一个function，固定不能修改，'admin.username'是该动态节点的name属性值（name='admin.username'），能否通过id属性为节点添加属性暂时未测试。（应该是可以的吧....）

校验类型

bootstrapValidator已经提供了很多校验的类型，下面来一一介绍一下：

1.不为空校验

   notEmpty: {
          message: '用户名不能为空'
   }

2.字符串长度校验

  stringLength: {
        min: 6,
        max: 30,
        message: '用户名长度必须在6到30之间'
}

3.远程数据校验（与后台Servlet交互）

   //有6字符以上才发送ajax请求，（input中输入一个字符，插件会向服务器发送一次，设置限制，6字符以上才开始）
  threshold :  6 , 
  //远程数据校验
  remote: {
    type: "post",//请求类型
    url: '后台地址',//后台地址
    message: "标识不能重复",
    dataType: 'json',
    data: {
                    //传入后台的值
            username: function() {
                 return $('#username').val();
        }
  },
  //500毫秒请求一次后台
  delay: 500

总结

fields:{
}
里面是需要进行校验的节点，多个通过","号隔开

validators: {
}
里面是某个节点校验的类型加参数，多个通过","号隔开