BootstrapValidator，最好用的bootstrap表单验证插件

野性酷女 2021-09-10 15:20 562阅读 0赞

本篇推荐一款twitter做的BootstrapValidator，本身Bootstrap就是twitter做的，那么使用原配的validator也就更值得信赖。从百度上搜BootstrapValidator会出现很多款，但我只推荐这款（突然感觉自己有点“库【Steve 库里】吹”的感觉）。

![这里写图片描述][20160413095200526]

\#\#\#一、一睹为快  
![这里写图片描述][20151013174100507]  
为了简便的介绍，这里只做为空的check。

[BootstrapValidator官方下载地址][BootstrapValidator]

\#\#\#二、资源引用

下载完资源包后，你可以看到如下的目录。  
![这里写图片描述][20160312171205032]

然后把以下三个文件引入到你项目。

\#\#\#三、会员名称不为空项目配置

1.  data-bv-notempty表示该会员编号要做为空check。
2.  form-group的div是必须的，否则会报“too much recursion”错误。
3.  form表单提交的时候会执行validateCallback方法，该方法在第五步中具体介绍。

\#\#\#四、页面加载完成后启用bootstrap validator

$(function() { 
    	// validate form
    	$("form.required-validate").each(function() { 
    		var $form = $(this);
    		$form.bootstrapValidator();
    		
    		// 修复bootstrap validator重复向服务端提交bug
    		$form.on('success.form.bv', function(e) { 
    			// Prevent form submission
    			e.preventDefault();
    		});
    		
    		
    	});
    });

1.  在form表单上加上‘class=“required-validate”’属性，然后通过jquery获取对应form表单，对其执行默认的bootstrapValidator加载。
2.  一定要注意上面代码中注释部分代码，具体介绍可参照[修复BootstrapValidator重复提交的bug][BootstrapValidator_bug]。

\#\#\#五、form表单提交时验证项目

1.  validateCallback中获取form表单后，通过isValid方法可以返回表单验证是否通过。
2.  当表单验证通过后，再通过ajax将表单提交到服务端。

--------------------

![20190430093935456.jpg][]

[20160413095200526]: /images/20210506/21109972183549718a933698057ed05c.png
[20151013174100507]: /images/20210506/5a923cc4c329491ea52472b313ddf4fd.png
[BootstrapValidator]: http://bv.doc.javake.cn/
[20160312171205032]: /images/20210506/3daa4ed1012c4bebb7568bd0e8d0d9ff.png
[BootstrapValidator_bug]: http://blog.csdn.net/qing_gee/article/details/49152229
[20190430093935456.jpg]: /images/20210506/ad932ea5d0e24435aa4aa2840f615152.png