Bootstrap Validator表单验证超详要如何做

本篇内容介绍了"BootstrapValidator表单验证超详要如何做"的有关知识，在实际案例的操作过程中，不少人都会遇到这样的困境，接下来就让小编带领大家学习一下如何处理这些情况吧！希望大家仔细阅读，能够学有所成！

一、引入 js 和 css 文件

在我们开始项目的时候我们需要导入下面这两个文件：bootstrapValidator.js、bootstrapValidator.css。我们需要在有jquery和bootstrap的页面里引入。

二、编写html

我们在项目中的 html文件中编写 form 表单，添加表单控件，如果我们想对某一字段添加验证规则的话，则默认需要以

    
        Username        
                    
    
    
        Email address        
                    
    

三、添加规则验证

1、在html标签中添加，代码如下所示：

    Username    
            

2、添加 js 文件，代码如下：

$(function () {      $("#form-test").bootstrapValidator({          live: 'disabled',//验证时机，enabled是内容有变化就验证（默认），disabled和submitted是提交再验证          excluded: [':disabled', ':hidden', ':not(:visible)'],//排除无需验证的控件，比如被禁用的或者被隐藏的          submitButtons: '#btn-test',//指定提交按钮，如果验证失败则变成disabled，但我没试成功，反而加了这句话非submit按钮也会提交到action指定页面          message: '通用的验证失败消息',//好像从来没出现过          feedbackIcons: {//根据验证结果显示的各种图标              valid: 'glyphicon glyphicon-ok',              invalid: 'glyphicon glyphicon-remove',              validating: 'glyphicon glyphicon-refresh'          },          fields: {              text: {                  validators: {                      notEmpty: {//检测非空,radio也可用                          message: '文本框必须输入'                      },                      stringLength: {//检测长度                          min: 6,                          max: 30,                          message: '长度必须在6-30之间'                      },                      regexp: {//正则验证                          regexp: /^[a-zA-Z0-9_\.]+$/,                          message: '所输入的字符不符要求'                      },                      remote: {//将内容发送至指定页面验证，返回验证结果，比如查询用户名是否存在                          url: '指定页面',                          message: 'The username is not available'                      },                      different: {//与指定文本框比较内容相同                          field: '指定文本框name',                          message: '不能与指定文本框内容相同'                      },                      emailAddress: {//验证email地址                          message: '不是正确的email地址'                      },                      identical: {//与指定控件内容比较是否相同，比如两次密码不一致                          field: 'confirmPassword',//指定控件name                          message: '输入的内容不一致'                      },                      date: {//验证指定的日期格式                          format: 'YYYY/MM/DD',                          message: '日期格式不正确'                      },                      choice: {//check控件选择的数量                          min: 2,                          max: 4,                          message: '必须选择2-4个选项'                      }                  }              }          }      });      $("#btn-test").click(function () {//非submit按钮点击后进行验证，如果是submit则无需此句直接验证          $("#form-test").bootstrapValidator('validate');//提交验证          if ($("#form-test").data('bootstrapValidator').isValid()) {//获取验证结果，如果成功，执行下面代码              alert("yes");//验证成功后的操作，如ajax          }      });  });

四、前端自定义验证规则

1、回调自定义验证

通过Bootstrapvalidator的前端自定义验证为callback，代码如下所示：

"rowkey": {    message: 'rowkey验证失败',    validators: {        stringLength:{            max: 1000,            message: 'rowkey不能超过1000个字符'        },        callback:{            callback : function(value, validator, $field) {                if ($('input:radio[name="databaseType"]:checked').val() == "Hbase" &&                    value == ""){                    return {                        valid: false,                        message: 'rowkey不能为空'                    }                }                else{                    return true                }            }        }    }}

2、拓展插件的validators方法

这个方法是将项目中常用的方法放到了一个单独js中从而实现我们需要的效果的，代码如下所示：

$(function () {    $.fn.bootstrapValidator.validators.checkIdCard = {        /**        * @param {BootstrapValidator} 表单验证实例对象        * @param {jQuery} $field jQuery 对象        * @param {Object} 表单验证配置项值        * @returns {boolean}        */        validate: function (validator, $field, options) {            // debugger;            try {            return checkIdCardNo($field.val());            }catch (e){            console.error(e);            }        return false;        }    };}(window.jQuery));

3、remote 后端自定义验证

我们知道在Bootstrapvalidator的前端自定义验证为remote，这个我们在数据库验重时经常会用到 ，代码如下所示：

"tableName": {    message: '表名称验证失败',    validators: {        notEmpty: {            message: '表名称不能为空'        },        stringLength:{            max: 100,            message: '表名称不能超过100个字符'        },        remote: {            message: '表名重复',            url: 'check',            data : '',//这里默认会传递该验证字段的值到后端            delay: 2000 //这里特别要说明，必须要加此属性，否则用户输入一个字就会访问后台一次，会消耗大量的系统资源，        }    }},

后端部分代码：

//检测新增metaTableName是否重复    def check(){        def map = new HashMap()        def result = service.check(params.name)        if(result){            map.put("valid",true)         }else{            map.put("valid",false)        }        render(map as JSON) // 注意后端传到前端的格式必须是带有valid属性的json对象才会被validator识别，　　　　　　　　　　　　　　　　 //　如果返回任何其他的值，页面验证将获取不到验证结果导致无法验证    }{"valid":false} //表示不合法，验证不通过  {"valid":true} //表示合法，验证通过

五、常用事件

1、获取validator对象或实例

我们这个方法一般是使用直接调用 $(form).bootstrapValidator(options)来初始化validator。在初始后之后有两种方法来获取我们的validator对象或实例，方法如下所示：

方法一：

// Get plugin instance  var bootstrapValidator = $(form).data('bootstrapValidator');  // and then call method  bootstrapValidator.methodName(parameters)

方法二：

$(form).bootstrapValidator(methodName, parameters);

这种方式获取的是代表当前form的jquery对象，调用方式是将方法名和参数分别传入到bootstrapValidator方法中，可以链式调用。

两种方法使用如下所示：

// The first way  $(form)      .data('bootstrapValidator')      .updateStatus('birthday', 'NOT_VALIDATED')      .validateField('birthday');    // The second one  $(form)      .bootstrapValidator('updateStatus', 'birthday', 'NOT_VALIDATED')      .bootstrapValidator('validateField', 'birthday');

2、重置某一单一验证字段验证规则

$(formName).data("bootstrapValidator").updateStatus("fieldName",  "NOT_VALIDATED",  null );

3、重置表单所有验证规则

$(formName).data("bootstrapValidator").resetForm();

4、手动触发表单验证

//触发全部验证$(formName).data("bootstrapValidator").validate();//触发指定字段的验证$(formName).data("bootstrapValidator").validateField('fieldName');

5、获取当前表单状态

var flag = $(formName).data("bootstrapValidator").isValid();

6、根据指定字段名称获取验证对象

// element = jq对象 / nullvar element = $(formName).data("bootstrapValidator").getFieldElements('fieldName');

"BootstrapValidator表单验证超详要如何做"的内容就介绍到这里了，感谢大家的阅读。如果想了解更多行业相关的知识可以关注网站，小编将为大家输出更多高质量的实用文章！