使用格式:
在提交表单的click事件中插入语句:
$("#inputForm").bootstrapValidator('validate');
其中:inputForm是所要提交的表单的id
以上语句实现在点击按钮时进行表单的验证。
$("#inputForm").bootstrapValidator({
message : "请录入一个有效值",
feedbackIcons : {
valid : "glyphicon glyphicon-ok",
invalid : "glyphicon glyphicon-remove",
validating : "glyphicon glyphicon-refresh"
},
fields : {
width: {
validators : {
notEmpty : {
message : "宽度不能为空"
}
}
},
height : {
validators : {
notEmpty : {
message : "高度不能为空"
}
}
}
}
}).on("success.form.bv",function(e) {
editData();
});
以上为在输入表单时验证
1.布局错位改变的问题
每个(每行)需要验证的表单控件都要用<div class="form-group"></div>包围,form-group样式包裹的表单在显示提示的信息时可避免下一行的样式发生改变
2.自定义的表单认证
bootstrapValidator可以自定义表单认证
callback: {
message: '宽度不能小于高度',
callback: function(value, validator) {
var reg = /^\d{3}}$/;
var r = $("#height").val().match(reg);
if(r==null)return true
var items = $("#height").val();
return value > items;
}
},
callback中的 value代表当前表单的值,多个callback嵌套只有最有一个正常验证
3.ajax
bootstrapValidator中可通过ajax来访问后台数据,并返回布尔值
remote: {
url: '/a/checkname',
message: '用户名重复',//提示消息
type: 'POST',//请求方式
// 自定义提交数据,默认值提交当前input value
data: function(validator) {
return {
width: $('[name="width"]').val(),
height: $('[name="height"]').val()
};
}
}
返回{"valid",true or false}对象,如果是{"valid",true }则验证通过,如果是{"valid",false}则没有通过
ajax验证是每次change都执行