使用格式:
在提交表单的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都执行