当前位置：首页 > 资讯 > 技术文档

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

时间：2021-01-10 16:53 编辑：来源：阅读：
扫一扫，手机访问

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

本文推荐一款twitter做的bootstrapValidator.js，本身bootstrap就是twitter做的，那么使用原配的validator也就更值得信赖。从百度上搜bootstrapValidator会出现很多款，但我只推荐这款： [img]http://files.jb51.net/file_images/article/201605/2016530103705161.jpg?2016430103713[/img] [b]一、一睹为快[/b] [img]http://files.jb51.net/file_images/article/201605/2016530103755899.jpg?201643010382[/img] 为了简便的介绍，这里只做为空的check。 [url=http://bv.doc.javake.cn/]BootstrapValidator官方下载地址[/url] [b]二、资源引用[/b] 下载完资源包后，你可以看到如下的目录。 [img]http://files.jb51.net/file_images/article/201605/2016530103817913.jpg?2016430103825[/img] 然后把以下三个文件引入到你项目。

<link type="text/css" rel="stylesheet" href="${ctx}/components/validate/css/bootstrapValidator.css" />
<script type="text/javascript" src="${ctx}/components/validate/js/bootstrapValidator.js"></script>
<script type="text/javascript" src="${ctx}/components/validate/js/language/zh_CN.js"></script>

[b]三、会员名称不为空项目配置[/b]

<form class="form-signin required-validate" action="${ctx}/login" method="post" onsubmit="return validateCallback(this)">
 <div class="form-group">
 <div class="row">
 <label>账户</label>
 <input class="form-control" type="text" autofocus name="username" placeholder="请输入会员编号" autocomplete="off"
 data-bv-notempty />
 </div>
 </div>
</form>

data-bv-notempty表示该会员编号要做为空check。 form-group的div是必须的，否则会报“too much recursion”错误。 form表单提交的时候会执行validateCallback方法，该方法在第五步中具体介绍。 [b]四、页面加载完成后启用bootstrap validator[/b]

$(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很漂亮，但漂亮的脸蛋下往往会隐藏杀机，这不，出现了[b]重复提交的bug[/b]。 [b]解决办法：[/b]

// 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();。 [b]bug调查：[/b] [img]http://files.jb51.net/file_images/article/201605/2016530104052515.jpg?201643010414[/img] [b]调查结果：[/b] 1.当不使用BootstrapValidator时，就不会出现如图提示问题。 2.只有首次点击提交，会重复提交两次，而接下来重新输入用户名后，就单次提交了。 [b]bug发生环境：[/b]

[url=http://www.1sucai.cn/article/84087.htm]这里[/url]进行学习，再为大家附3个精彩的专题： [url=http://www.1sucai.cn/Special/334.htm]Bootstrap学习教程[/url] [url=http://www.1sucai.cn/Special/769.htm]Bootstrap实战教程[/url] [url=http://www.1sucai.cn/Special/854.htm]Bootstrap插件使用教程[/url] 以上就是关于本文的全部内容，希望对大家的学习有所帮助。

全部评论(0)

上一篇：jquery动态添加删除一行数据示例
下一篇：JQuery动态添加和删除表格行的方法

资讯排行榜
更多>>

联系客服

客服电话：
400-000-3129

微信版

扫一扫进微信版

返回顶部