bootstrapValidator表单验证插件的使用API文档推荐 原创 收藏

文章标签: 帮助手册
  • :
  • 04-08 15:22
  • :
  • 20次
  • :
  • 0条
  • 2赞

简介本文和你分享bootstrapValidator表单验证插件的非常详细的API中文帮助文档,通过本文可以让你了解和掌握bootstrapValidator插件的所有所属和方法,可以很快的把bootstrapValidator插件应用到自己的网页当中。l

本文站长和大家分享一下如何把bootstrapValidator表单验证插件应用到自己的网页里,并且把bootstrapValidator插件里所有的属性和方法都用中文来解释一下,算是bootstrapValidator插件的一篇API中文帮助手册吧。

大家可以先点下面的链接看站长给大家提供的基于bootstrap和bootstrapValidator插件做的一个用户登陆界面的在线演示:

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

下面站长来一步一步的教大家如何把bootstrapValidator插件应用到自己的网页里,并且把bootstrapValidator插件里所有属性都列出来,并和你解释其中的含义和用法。

第一步:引入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:

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

  2. 上面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'
},

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

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

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

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


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

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

stringLength:值的长度,min设置最短,max设置最长;

regexp:正则验证,

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

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

between:输入的值必须在指定的数值之间;

另外还有一些常用的验证规则:



您正在找的文章可能是:
热点文章
热点图文
最近更新
  • Copyright © aijquery.cn 爱jQuery-完全免费的jquery交流学习网站
  • 豫ICP备17037455号-1
  • 2018-11-15 17:25:01