bootstrap 报错 验证插件_BootstrapValidator-验证插件

一、使用须知

二、新手上路

1.在页面中引入相应的js和css，要知道bootstrap是基于jquery的，所以先引入jquery和bootstrap

好了，将上述的css和js引入到页面中就可以愉快的开发了。

2. html中的代码(这里只是为了举例拿用户名和邮箱示例一下)：

用户名：

邮箱：

提交

注意：使用bootstrapValidator验证插件必须将表单里的组件包裹在

这个标签中，并且一个需要验证的组件对应一个

，这样提示信息才会高亮显示。

3. js中的代码

$(document).ready(function() {

$('#form1').bootstrapValidator({

feedbackIcons: {

valid: 'glyphicon glyphicon-ok',

invalid: 'glyphicon glyphicon-remove',

validating: 'glyphicon glyphicon-refresh'

},

fields: {

'username': {

message: '用户名无效',

validators: {

notEmpty: {

message: '用户名不能为空'

},

stringLength: {

min: 6,

max: 30,

message: '用户名长度在6到30之间'

}

}

},

'email': {

validators: {

emailAddress: {

message: '请输入有效的邮箱格式'

}

}

}

}

});

});

注意：feedbackIcons是设置验证通过和不通过的图标的，fields是用来设置from中具体的表单元素验证的。

三、触类旁通

通过上面的方式我们可以轻松的对表单元素进行各种验证，但是上面这种写法确实分离我们验证的业务代码，但是实际开发中我们更喜欢将验证信息嵌在表单元素中，因为这样会更省时省力，直接copy改就可以了。那么BootstrapValidator这个插件是否支持在表单元素中直接去写呢，答案当然是肯定的。

1. html代码：

用户名：

required data-bv-notempty-message="用户名称不能为空"

data-bv-stringlength="true" data-bv-stringlength-min="6"

data-bv-stringlength-max="30" data-bv-stringlength-message="用户名长度在6到30之间"/>

邮箱：

data-bv-emailAddress="true" data-bv-emailAddress-message= '请输入有效的邮箱格式' />

提交

2. js代码：

$(document).ready(function() {

$('#form1').bootstrapValidator({

feedbackIcons: {

valid: 'glyphicon glyphicon-ok',

invalid: 'glyphicon glyphicon-remove',

validating: 'glyphicon glyphicon-refresh'

}

});

});

3. 不用submit提交，使用点击事件触发校验

页面上有个按钮id为btn_save_id，代码如下

$(document).ready(function() {

$("#btn_save_id").click(function(){

$('#form1').bootstrapValidator('validate');

if($('#form1').data('bootstrapValidator').isValid()) {

//验证通过，执行后续操作

}

});

});

四、牛刀小试

下面是我碰到的一些验证，可以将验证代码直接嵌入到表单元素中

1. 正整数(正则)验证

pattern="^\+?[0-9][0-9]*$" data-bv-regexp-message="请输入正确的数字"

2. 数值类型验证

data-bv-numeric="true" data-bv-numeric-message="请输入数值类型"

3. 长度验证

data-bv-stringlength="true" data-bv-stringlength-min="1"

data-bv-stringlength-max="20" data-bv-stringlength-message="长度最大为20个字符"

4. 自定义验证规则(json验证)

data-bv-callback="true" data-bv-callback-callback="validByJsonFn" data-bv-callback-message="请输入可识别的JSON格式"

//验证是否是{"key":"value"}这种json格式的方法

function validByJsonFn(value) {

var bool=false;

try {

if(value!==""){

if(value.length>8&&value.indexOf("[")!=-1&&value.indexOf("]")!=-1

&&value.indexOf("{")!=-1&&value.indexOf("}")!=-1&&value.indexOf(":")!=-1){

var myjson= JSON.parse(value);

bool=true;

}else{

bool=false;

}

}else{

bool=true;

}

} catch (e) {

bool=false;

}

return bool;

}

5. 表单元素二填一验证(两个input填一个即可)

每天投票数量：

data-bv-callback="true" data-bv-callback-callback="validByVotingFn"

data-bv-callback-message="每天投票数量和总共投票数量必须选填一个"

data-bv-numeric="true" data-bv-numeric-message="请输入数值类型"

data-bv-stringlength="true" data-bv-stringlength-min="1"

data-bv-stringlength-max="11" data-bv-stringlength-message="长度最大为11个字符"/>

总共投票数量：

data-bv-callback="true" data-bv-callback-callback="validByVotingFn"

data-bv-callback-message="每天投票数量和总共投票数量必须选填一个"

data-bv-numeric="true" data-bv-numeric-message="请输入数值类型"

data-bv-stringlength="true" data-bv-stringlength-min="1"

data-bv-stringlength-max="11" data-bv-stringlength-message="长度最大为11个字符"/>

js代码：

function validByVotingFn(value,e,v){

var num1=$("#votesPerDay").val();

var num2=$("#totalVotes").val();

var bool=false;

if(num1||num2){

$("#totalVotes").attr("disabled",false);

$("#votesPerDay").attr("disabled",false);

$("#form1").data("bootstrapValidator").updateStatus("votesPerDay","NOT_VALIDATED",null);

$("#form1").data("bootstrapValidator").updateStatus("totalVotes","VALIDATED",null);

bool=true;

}

if(num1&&num1.length>0){

$("#totalVotes").val("").attr("disabled",true);

}else{

$("#totalVotes").attr("disabled",false);

}

if(num2&&num2.length>0){

$("#votesPerDay").val("").attr("disabled",true);

}else{

$("#votesPerDay").attr("disabled",false);

}

return bool;

}

6. 还有很多很多验证，不过常用的可能基本上也就这些了，后面碰到我再补充上来

五、纵横江湖

重置某个字段验证信息

$("#form3").data("bootstrapValidator").updateStatus("answerList","VALIDATED",null);

注意：第一个参数为表单元素name，第二个参数可以是NOT_VALIDATED，VALIDATING，INVALID或者VALID，第三个参数验证程序名称，如果null该方法更新所有验证器的有效性结果。