使用格式:

在提交表单的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都执行

posted on 2016-08-17 23:12  风之灵武  阅读(1225)  评论(0编辑  收藏  举报