bootstrap插件bootstrapValidator常用验

作者: 青风野客 | 来源:发表于2019-09-26 15:00 被阅读0次

第一步：引入bootstrapValidator插件的js文件和css样式：

<script language="JavaScript" src="//cdn.bootcss.com/jquery/1.9.1/jquery.min.js"></script>
<script language="JavaScript" src="//cdn.bootcss.com/jquery.bootstrapvalidator/0.5.3/js/bootstrapValidator.min.js"></script>
<link rel="stylesheet" href="//cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="//cdn.bootcss.com/jquery.bootstrapvalidator/0.5.3/css/bootstrapValidator.min.css">

PS：因为bootstrapValidator插件和bootstrap插件是融合的非常完美的插件，并且bootstrap插件也是一款非常棒的网页前台插件，所以在使用的时候，一般都是两个插件同时使用的。

第二步：部署HTML代码，就是你自己的表单项：

<form id="AngelForm" class="form-horizontal" onsubmit="return false">
    <Div class="form-group row">
        <label class="col-xs-3 control-label text-right">用户名:</label>               
        <div class="col-xs-6">                  
            <input name="UName" type="text" class="form-control">             
        </div>           
    </Div>           
    <Div class="form-group">            
        <label class="col-xs-3 control-label text-right">密码:</label>            
        <div class="col-xs-6">                  
            <input name="UPassWord" type="password" class="form-control">             
        </div>           
    </Div>           
    <Div class="form-group">            
        <div class="col-xs-6 col-xs-offset-3">                 
            <button id="Login" type="submit" class="btn btn-primary">登陆</button>                   
            <label id="info" class="text-danger"></label>            
        </div>           
    </Div>       
</form>

PS：

上面的内容是基于bootstrap插件来布置，如果想要了解更多关于bootstrap插件的使用方法和实例，可以关注本站的bootstrap插件栏目。

上面HTML代码中，form表单里，站长添加了一个 onsubmit="return false" 的属性，意思是为了阻止表单的提交，这样写的好处就是当我们的网页相关的JS文件没有加载完成时，点击提交按钮，表单就不会提交。

第三步：开始编写具体的验证代码，

注意，官网里有具体的把相关代码写到HTML各标签的属性里的方法，但是站长从不这样来用，因为这样写对后期网站的维护非常麻烦，我们把所有的代码都写到一个单独的JS文件里，HTML只是用来展示内容和页面，分工具体，后期维护起来也简单。

<script language="JavaScript">
$(function() {
    $("#AngelForm").bootstrapValidator({       
        live: 'enabled',     
        trigger: 'blur keyup',      
        verbose: false,      
        feedbackIcons: {          
            valid: 'glyphicon glyphicon-ok',         
            invalid: 'glyphicon glyphicon-remove',           
            validating: 'glyphicon glyphicon-refresh'    
        },     
        container: "#info",       
        submitButtons: "#Login",      
        fields: {         
            UName: {              
                validators: {                 
                    notEmpty: {                       
                        message: '用户名不能为空'                
                    },                   
                    stringLength:{                     
                        min:"4",                         
                        max:"10",                        
                        message:"最短为4,最长为10"                    
                    },                 
                    regexp: {                     
                        regexp: /^[a-zA-Z0-9_]{4,10}$/,                       
                        message: '只能为字母数字，最短4，最长10！'                  
                    },                 
                    callback: {}              
                }          
            },         
            UPassWord: {              
                validators: {                 
                    notEmpty: {                       
                        message: '密码不能为空！'                
                    },                 
                    regexp: {                     
                        regexp: /^[a-zA-Z0-9_]{1,20}$/,                       
                        message: '只能为字母数字，最短1，最长20！'                  
                    },                 
                    callback: {}              
                }          
            }      
        }  
    });
});
</script>

第四步：当上面我们配置的各种验证项都通过时，就要提交表单了，我们可以直接使用bootstrapValidator插件给我们提供的表单验证成功事件来提交表单：

$("#AngelForm").on('success.form.bv', function(e) {      
    e.preventDefault();    
    var $form = $(e.target);    
    var bv = $form.data('bootstrapValidator');      
    var action ="/Html/aijquery/ajax.asp";       
    $.post(action,$form.serialize(),function(result){          
        console.log(result);           
    },"json"); 
});

PS：更多的关于bootstrapValidator插件的事件，请看：

好了，到这里，我们就已经完成了，通过上面的这四个步骤，大家可以发现，难点就在第三步里，下面站长就来仔细的和大家分析一下第三步里的代码。

首先，我们先来看使用bootstrapValidator插件来写具体的验证规则时的大致框架：

$("#表单ID").bootstrapValidator({
    [a.统一配置项或验证规则的主题配置]，
    fields:{
        form项的name:{
            [b.验证本表单项时，所有规则的统一配置]
            validators:{
                [c.具体的验证规则]
            }
        }
    }
});

这样一看，是不是就清楚多了？我们在使用bootstrapValidator插件的时候，框架都是上面这样的，如果我们要动手自己写代码的时候，可以直接先把上面的框架复制过去，然后再把中括号去掉，换成自己需要的内容，这样一清二楚，明明白白。

下面站长来具体说说上面框架里各个部分里常用的属性，及其作用和介绍：

[a.统一配置项或验证规则的主题配置]：

顾名思义，这一区域的各种属性针对的是整个验证过程当中的，如我们可以定义统一的验证规则的触发方式，验证出错时统一的提示信息，提示信息的显示位置等，下面站长来说下具体的属性内容：

$("#表单ID").bootstrapValidator({
    excluded: [':disabled', ':hidden', ':not(:visible)'],
    feedbackIcons: {
        valid: 'glyphicon glyphicon-ok',
        invalid: 'glyphicon glyphicon-remove',
        validating: 'glyphicon glyphicon-refresh'
    },
    live: 'enabled',//或disabled,submitted
    trigger: 'blur keyup', 
    message: '输入的值格式不正确',
    submitButtons: '#Login',
    submitHandler: function(validator, form, submitButton) {
        $.post(form.attr('action'),form.serialize(),function(result) {
            //具体的代码内容
        }, 'json');
    }，
    trigger:null,
    verbose：false,
    fields:{
        form项的name:{
            [b.验证本表单项时，所有规则的统一配置]
            validators:{
                [c.具体的验证规则]
            }
        }
    }
});

下面站长来给大家详细说说上面的各项属性的含义：

1.excluded:

excluded: [':disabled', ':hidden', ':not(:visible)']

excluded是用来设置不验证的表单项，上面写出的值就是excluded的默认值，一般我们不需要配置此项，
但如果你在实际当中需要不验证某个表单项，可以直接把表单项的ID添加进去，如：

excluded: [':disabled', ':hidden', ':not(:visible)','#UName'],

PS：在文章最上面的在线实例演示里，大家可以把这句代码加进去，查看效果！

2.feedbackIcons:

feedbackIcons: {
   valid: 'glyphicon glyphicon-ok',
   invalid: 'glyphicon glyphicon-remove',
   validating: 'glyphicon glyphicon-refresh'
},

feedbackIcons是用来设置表单项处在不同验证状态[分别是正确、失败和等待]时所显示的图标，因为bootstrapValidator插件就是在bootstrap插件的结构上来写的，所以所用到的都是根据bootstrap插件[大于3.1，小于4.0的版本]的样式及名称，当然，这并不表示我们不能自己修改它的样式：

feedbackIcons: {
   valid: 'zhengque',
   invalid: 'shibai',
   validating: 'dengdai'
},

如上，我们定义好了不同验证状态所要显示的样式名称，并且在样式表里写好具体的样式内容后，还需要修改一下默认的样式属性来替代原来的样式，来看下面的截图：

image.png

截图里，圈起来的三个属性是关键的属性，在bootstrapValidator插件里，默认的属性如下：

.form-horizontal .has-feedback .form-control-feedback {
     top: 0;
     right: 15px;
}

我们可以根据自己的需要来具体的调整改写我们自己所要的样式。

当然，如果我们不想让它显示图标的话，只需要把它设为false就行了：

1
feedbackIcons:false,

3.live：

live: 'enabled',//或disabled,submitted

live用来设置触发验证规则的方式，enabled表示值有变化时就触发，disabled和submitted的效果一样，就是当要提交表单时再触发验证，具体的大家可以在文章最上面站长给的在线实例演示里，自己去测试。

4.trigger:

trigger: 'blur keyup',

trigger:用来设置具体的触发验证规则的方式，只有上面的live设置为enabled时，trigger才有效，可以为多个值，中间用空格隔开，具体的大家可以在上面站长提供的在线实例演示里自己动手测试。

5.message:设置所有验证规则里出错时的提示信息；

这个没什么好说的，一般我们都设置在具体的每个验证规则里，一般不在这里验证，但如果哪个验证规则里没有设置要验证的信息，那么就会显示这里设置的内容。

6.submitButtons

submitButtons: '#Login',

submitButtons用来设置表单里的提交按钮，设置的规则参考的是jquery里的规则，所以也可以这样写：

submitButtons: 'button[type="submit"]',

7.submitHandler：

submitHandler: function(validator,form,submitButton) {
    $.post(form.attr('action'),form.serialize(),function(result) {
        //具体的代码内容
    }, 'json');
}

submitHandler用来设置表单提交的操作，自带的三个参数的含义如下：

validator: 表单验证实例对象
form jquery对象指定表单对象
submitButton jquery对象指定提交按钮的对象

站长一般不习惯在这里设置表单提交，而是在success.form.bv事件里，所以如果你也不想在这里提交表单的话，可以不写这个配置项，也可以这样来写：

submitHandler:null,

8.verbose:

verbose:false,

verbose的值为true时，那么将显示表单项里所有不符合的错误提示信息，为false时，则只显示一条信息；

如上面站长给的在线实例里，验证用户名时，有两个验证规则是重复的，stringLength和regexp，一个是bootstrapValidator插件提供的用来验证值的长度的规则，一个是我们自己写的正则验证规则，如果我们把verbose设为true时，那么在用户名验证不通过时，就会显示所有的验证提示信息。

[b.验证本表单项时，所有规则的统一配置]：

这个区域设置的验证表单里某个表单项时的一些规则和配置，比如上面实例里，我们在验证用户名，也就是表单项：UName时，我们为它指定了很多的验证规则，有不能为空，判断字符长度和自定义的正则验证规则，那么我们就可以在这里给这些规则配置一下统一的要求，比如统一的错误提示信息，错误提示信息显示的位置，和触发验证规则的方式等，看下面具体的一些配置属性：

$("#表单ID").bootstrapValidator({
    [a.统一配置项或验证规则的主题配置]，
    fields:{
        UName:{
            container:"#ErrInfo",
            message:"用户名格式不正确",
            trigger:"focus keyup",
            selector:"#UName",
            validators:{
                [c.具体的验证规则]
            }
        }
    }
});

下面站长来具体说下这些属性：

1.container:

container:"#ErrInfo"//或者用css属性 ".ErrInfo"

container用来设置错误信息的显示位置，这个不用多作解释，大家应该都能明白。

2.message:

message:"用户名格式不正确",

message:用来设置错误提示信息，如果具体的验证规则里没有指定提示信息，就会显示这里设置的信息。

3.trigger:

trigger:"focus keyup",

trigger和上面站长说的a区域里的trigger是一样的，这里如果设置了trigger触发验证的方式，那么就会用这里设置的方式，如果这里没设置，就会用上面a区域里设置的方式。

4.selector:

selector:"#UName",

selector用来设置和定义要验证的节点，一般情况下我们都不会用到这个配置项，但如果我们的表单里，有多个相同属性的表单，它们的验证要求也都是一样的，那么这个属性就会非常有用了，比如有时表单里可能会需要输入两个名字，现用名和曾用名，那么我们就可以用selector来统一给他们验证，给它们加上同样的CSS样式，然后这样写就行：

selector:".UserName",

[c.具体的验证规则]:

这个区域里就是具体的验证规则了，下面站长给大家介绍一下一些常用的规则：

$("#表单ID").bootstrapValidator({
    [a.统一配置项或验证规则的主题配置]，
    fields:{
        form项的name:{
            [b.验证本表单项时，所有规则的统一配置]
            validators:{
                notEmpty: {message: '用户名不能为空'},
                stringLength:{min:"4",max:"10",message:"最短为4,最长为10"},
                regexp: {regexp: /^[a-zA-Z0-9_]{4,10}$/,message: '只能为字母数字，最短4，最长10！'},
                callback:{
                    callback:function(value,validator,$field){
                        if(value.length > 0) {
                            var v=value.replace(/，/g,",");
                            $field.val(v);
                        }
                        return true;
                    }
                }，
                remote:{    
                    type: 'POST',    
                    url: 'check.asp',    
                    message: '用户名被占用',    
                    delay: 1000    
                }, 
                between:{
                    min:1,
                    max:99,
                    message:"输入的值必须在1-99之间"
                }   
            }
        }
    }
});

notEmpty:很简单，意思就是不能为空；

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

stringLength：值的长度，min设置最短，max设置最长；

stringLength: {
          min: 6,
          max: 30,
          message: '用户名长度不能小于6位或超过30位'
},

regexp：正则验证，

regexp: {
          regexp: /^[A-Z\s]+$/i,
          message: '名字只能由字母字符和空格组成。'
}

callback:自定义校验，用来对输入的值进行一些操作，比如上面代码里的，就是把输入的中文逗号换成英文的。

callback:{
  callback:function(val,validate,field){
        return true
  }
  message:'自定义校验'
}

between：输入的值必须在指定的数值之间；
greaterThan ：数值大于等于
lessThan：数值小于等于

greaterThan: {
      value: 18
},
lessThan: {
      value: 100
 }

密码确认

identical: {
     field: 'confirmPassword',
     message: 'The password and its confirm are not the same'
},

复选框验证

choice: {
       min: 2,
       max: 4,
       message: '请选择2-4项'
}

remote：在进行类似“用户名是否被占用时非常的有用”，

threshold :  6 , //有6字符以上才发送ajax请求，（input中输入一个字符，插件会向服务器发送一次，设置限制，6字符以上才开始）
remote: {
## ajax验证。server result:{"valid",true or false} 向服务发送当前input name值，获得一个json数据。例表示正确：{"valid",true}  
    url: 'exist2.do',//验证地址
    message: '用户已存在',//提示消息
    delay :  2000,//每输入一个字符，就发ajax请求，服务器压力还是太大，设置2秒发送一次ajax（默认输入一个字符，提交一次，服务器压力太大）
    type: 'POST'//请求方式
},

纯数字验证

digits: {
         message: '该值只能包含数字。'
}

日期格式验证

date: {
         format: 'YYYY/MM/DD',
         message: '日期无效'
}

邮箱验证

emailAddress: {
         message: 'The input is not a valid email address'
}

两个字段不相同的判断

different: {
          field: 'password',
          message: '用户名和密码不能相同。'
}

大小写验证

stringCase: {
          message: '姓氏必须只包含大写字符。',
          case: 'upper'//其他值或不填表示只能小写字符
},

摘自爱jQuery：http://www.aijquery.cn/Html/bootstrapValidator/54.html

bootstrap插件bootstrapValidator常用验

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读