bootstrap插件bootstrapValidator常用验证规则总结

bootstrap+bootstrapValidator做的登陆界面在线演示

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

1
2
3
4
<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代码,就是你自己的表单项:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<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只是用来展示内容和页面,分工具体,后期维护起来也简单。

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
44
45
46
47
<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插件给我们提供的表单验证成功事件来提交表单:

1
2
3
4
5
6
7
8
9
$("#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插件来写具体的验证规则时的大致框架:

1
2
3
4
5
6
7
8
9
10
11
$("#表单ID").bootstrapValidator({
    [a.统一配置项或验证规则的主题配置],
    fields:{
        form项的name:{
            [b.验证本表单项时,所有规则的统一配置]
            validators:{
                [c.具体的验证规则]
            }
        }
    }
});

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

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

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

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

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
$("#表单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:

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

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

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

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

2.feedbackIcons:

1
2
3
4
5
feedbackIcons: {
   valid: 'glyphicon glyphicon-ok',
   invalid: 'glyphicon glyphicon-remove',
   validating: 'glyphicon glyphicon-refresh'
},

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

1
2
3
4
5
feedbackIcons: {
   valid: 'zhengque',
   invalid: 'shibai',
   validating: 'dengdai'
},

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

image.png

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

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

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

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

1
feedbackIcons:false,

3.live:

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

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

4.trigger:

1
trigger: 'blur keyup',

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

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

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

6.submitButtons

1
submitButtons: '#Login',

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

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

7.submitHandler:

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

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

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

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

1
submitHandler:null,

8.verbose:

1
verbose:false,

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

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

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

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
$("#表单ID").bootstrapValidator({
    [a.统一配置项或验证规则的主题配置],
    fields:{
        UName:{
            container:"#ErrInfo",
            message:"用户名格式不正确",
            trigger:"focus keyup",
            selector:"#UName",
            validators:{
                [c.具体的验证规则]
            }
        }
    }
});

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

1.container:

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

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

2.message:

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

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

3.trigger:

1
trigger:"focus keyup",

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

4.selector:

1
selector:"#UName",

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

1
selector:".UserName",

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

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

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
$("#表单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:很简单,意思就是不能为空;

    1
    2
    3
    notEmpty: {
    message: '用户名必填不能为空'
    },
  • stringLength:值的长度,min设置最短,max设置最长;

    1
    2
    3
    4
    5
    stringLength: {
    min: 6,
    max: 30,
    message: '用户名长度不能小于6位或超过30位'
    },
  • regexp:正则验证,

    1
    2
    3
    4
    regexp: {
    regexp: /^[A-Z\s]+$/i,
    message: '名字只能由字母字符和空格组成。'
    }
  • callback:自定义校验,用来对输入的值进行一些操作,比如上面代码里的,就是把输入的中文逗号换成英文的。

    1
    2
    3
    4
    5
    6
    callback:{
    callback:function(val,validate,field){
    return true
    }
    message:'自定义校验'
    }
  • between:输入的值必须在指定的数值之间;

  • greaterThan :数值大于等于

  • lessThan:数值小于等于

    1
    2
    3
    4
    5
    6
    greaterThan: {
    value: 18
    },
    lessThan: {
    value: 100
    }
  • 密码确认

    1
    2
    3
    4
    identical: {
    field: 'confirmPassword',
    message: 'The password and its confirm are not the same'
    },
  • 复选框验证

    1
    2
    3
    4
    5
    choice: {
    min: 2,
    max: 4,
    message: '请选择2-4项'
    }
  • remote:在进行类似“用户名是否被占用时非常的有用”,

    1
    2
    3
    4
    5
    6
    7
    8
    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'//请求方式
    },
  • 纯数字验证

    1
    2
    3
    digits: {
    message: '该值只能包含数字。'
    }
  • 日期格式验证

    1
    2
    3
    4
    date: {
    format: 'YYYY/MM/DD',
    message: '日期无效'
    }
  • 邮箱验证

    1
    2
    3
    emailAddress: {
    message: 'The input is not a valid email address'
    }
  • 两个字段不相同的判断

    1
    2
    3
    4
    different: {
    field: 'password',
    message: '用户名和密码不能相同。'
    }
  • 大小写验证

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