实用又漂亮的BootstrapValidator表单验证插件

这篇文章主要为大家详细介绍了好用又漂亮的BootstrapValidator表单验证插件，感兴趣的小伙伴们可以参考一下

本文推荐一款twitter做的bootstrapValidator.js，本身bootstrap就是twitter做的，那么使用原配的validator也就更值得信赖。从百度上搜bootstrapValidator会出现很多款，但我只推荐这款：

一、一睹为快

为了简便的介绍，这里只做为空的check。

BootstrapValidator官方下载地址

二、资源引用

下载完资源包后，你可以看到如下的目录。

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

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

    账户

data-bv-notempty表示该会员编号要做为空check。
form-group的div是必须的，否则会报“too much recursion”错误。
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(); }); }); });

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

BootstrapValidator很漂亮，但漂亮的脸蛋下往往会隐藏杀机，这不，出现了重复提交的bug。

解决办法：

 // validate form $("form.required-validate", $p).each(function() { var $form = $(this); $form.bootstrapValidator().on('success.form.bv', function(e) { // 阻止默认事件提交 e.preventDefault(); }); });

为BootstrapValidator设置on方法，其key为success.form.bv，value为e.preventDefault();。

bug调查：