BootStrap Validator使用注意事项(必看篇)


Posted in Javascript onSeptember 28, 2016

如果你使用的前端框架是bootstrap,那么前端验证框架就不必考虑了,bootstrapvalidator是最好的选择,它和bootstrap的结合最完美,不过要注意版本的问题,针对bootstrap2和bootstrap3有不同的版本。

下面是我遇到的两个注意事项,自己做个笔记:

1、为每个要验证的表单元素添加name属性

例如:

<div class="form-group"> 
<input type="text" placeholder="请输入短信验证码" id="smsCaptcha" name="smsCaptcha" class="form-control" 
data-bv-notempty data-bv-notempty-message="验证码不能为空" 
data-bv-regexp="true" data-bv-regexp-regexp="[0-9]{6}" data-bv-regexp-message="验证码格式不正确" > 
</div> <div class="form-group"> 
<input type="email" class="form-control" id="exampleInputEmail1" placeholder="Enter email" 
data-bv-notempty data-bv-notempty-message="验证码不能为空" > 
</div>

上面这个例子中,第一个表单元素添加了name属性,第二个表单元素没有name属性,而这两个表单元素都使用了非空验证,最终效果如下:

BootStrap Validator使用注意事项(必看篇)

从结果可以看出,如果要验证一个表单项,则该表单项必须有name属性。否则验证将不起作用。

2、为保持良好的效果,表单元素最好放在div.form-group里面

例如下面这个例子:

<label for="exampleInputEmail1">用户名</label> 
<div class="input-group" > 
<input type="text" class="form-control required" placeholder="用户名" id="username" name="username" data-bv-notempty data-bv-notempty-message="请输入用户名" /> <span class="input-group-addon"> 
<span class="glyphicon glyphicon-user">
</span> 
</span> 
</div>

用户名输入框及其label直接放在了form元素下面,则最终产生的效果如下:

BootStrap Validator使用注意事项(必看篇)

当输入错误时的提示信息位置在整个form表单的下面,样式发生了极大的变化,虽然能达到验证的效果,但是样式却难以令人接受,解决办法就是将需要验证的表单元素放在div.form-group下面:

<div class="form-group"> 
<label for="exampleInputEmail1">用户名</label> 
<div class="input-group" > 
<input type="text" class="form-control required" placeholder="用户名" id="username" name="username" data-bv-notempty data-bv-notempty-message="请输入用户名" /> <span class="input-group-addon"> 
<span class="glyphicon glyphicon-user">
</span> 
</span> 
</div> 
</div>

BootStrap Validator使用注意事项(必看篇)

3、防止表单重复提交问题

在未引入bootstrapvalidator之前,自己写过一段js代码来防止表单提交,当用户点击提交按钮时候,将提交按钮置灰,代码如下:

var form = $('form'); 
var formType = form.attr('class'); 
if(formType != null){ 
//用get和post标识表单类型 
//get用于标识搜索类型的表单 
//post用于标识添加,更新类型的表单 
var get = formType.indexOf('get'); 
var post = formType.indexOf('post'); 
form.submit(function(){ 
if(get != -1){ 
return ; 
} 
if(post != -1){ 
if(!submited){ 
submited = true; 
$("button[type=submit]").prop('disabled',true); 
}else{ 
return false; 
} 
} 
}); 
}

但是引入bootstrapvalidator后却和这段代码冲突,具体表现为,如果验证出错,例如,某个input必填项没有填写时就提交了表单,此时bootstrapvalidator会提示你这个input为必填的,此时提交按钮为disable状态,直到你填入数据后,按钮才为正常可提交状态,问题就在这,即使你填入了正常的数据,按钮也为正常状态,可是表单却无法提交。排查了大半天,问题就在于上段js代码。

其实bootstrapvalidator已经对重复提交做了设计,如果一个表单需要经过bootstrapvalidator验证,点击提交按钮的时候,提交按钮会置灰,直到服务器返回响应。那么,如果一个表单不需要验证呢,比如一个搜索表单,此时可以给表单一个class,如validation-form,在js主函数里面调用$("form.validation-form").bootstrapValidator();将验证器置空即可。

推荐阅读:

以上所述是小编给大家介绍的BootStrap Validator使用注意事项(必看篇),希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
国外Lightbox v2.03.3 最新版 下载
Oct 17 Javascript
js列举css中所有图标的实现代码
Jul 04 Javascript
Extjs中ComboBox加载并赋初值的实现方法
Mar 22 Javascript
JavaScript实现拼音排序的方法
Nov 20 Javascript
一个JavaScript操作元素定位元素的实例
Oct 29 Javascript
JavaScript中使用concat()方法拼接字符串的教程
Jun 06 Javascript
js控制网页前进和后退的方法
Jun 08 Javascript
BootStrap整体框架之基础布局组件
Dec 15 Javascript
JavaScript模拟实现自由落体效果
Aug 28 Javascript
基于vue-upload-component封装一个图片上传组件的示例
Oct 16 Javascript
js中位运算的运用实例分析
Dec 11 Javascript
通过实例了解Javascript柯里化流程
Mar 03 Javascript
使用BootStrapValidator完成前端输入验证
Sep 28 #Javascript
request请求获取参数的实现方法(post和get两种方式)
Sep 27 #Javascript
使用JavaScript获取Request中参数的值方法
Sep 27 #Javascript
详解JavaScript权威指南之对象
Sep 27 #Javascript
Web性能优化系列 10个提升JavaScript性能的技巧
Sep 27 #Javascript
JS点击某个图标或按钮弹出文件选择框的实现代码
Sep 27 #Javascript
ReactNative页面跳转实例代码
Sep 27 #Javascript
You might like
session在PHP大型web应用中的使用
2011/06/25 PHP
windows的文件系统机制引发的PHP路径爆破问题分析
2014/07/28 PHP
删除PHP数组中头部、尾部、任意元素的实现代码
2017/04/10 PHP
控制打印时页眉角的代码
2007/02/08 Javascript
js判断是否为数组的函数: isArray()
2011/10/30 Javascript
JS判断页面加载状态以及添加遮罩和缓冲动画的代码
2012/10/11 Javascript
使用js在页面中绘制表格核心代码
2013/09/16 Javascript
js加密解密字符串可自定义密码因子
2014/05/13 Javascript
JS实现简易图片轮播效果的方法
2015/03/25 Javascript
JavaScript实现动态删除列表框值的方法
2015/08/12 Javascript
JavaScript Array对象详解
2016/03/01 Javascript
jQuery调用WebMethod(PageMethod) NET2.0的方法
2016/04/15 Javascript
Bootstrap table分页问题汇总
2016/05/30 Javascript
Javascript 5种方法实现过滤删除前后所有空格
2016/06/22 Javascript
详解Javascript函数声明与递归调用
2016/10/22 Javascript
jquery的父、子、兄弟节点查找,节点的子节点循环方法
2016/12/07 Javascript
使用微信内嵌H5网页解决JS倒计时失效问题
2017/01/13 Javascript
深入理解ES6 Promise 扩展always方法
2017/09/26 Javascript
17个Python小技巧分享
2015/01/23 Python
用PyQt进行Python图形界面的程序的开发的入门指引
2015/04/14 Python
Django logging配置及使用详解
2019/07/23 Python
python 实现两个线程交替执行
2020/05/02 Python
python判断正负数方式
2020/06/03 Python
浅析Python 中的 WSGI 接口和 WSGI 服务的运行
2020/12/09 Python
HTML5页面音视频在微信和app下自动播放的实现方法
2016/10/20 HTML / CSS
捷克购买家具网站:JENA nábytek
2020/03/19 全球购物
2014年五一活动策划方案
2014/03/15 职场文书
青年志愿者活动总结
2014/04/26 职场文书
2015年全国“爱牙日”宣传活动总结
2015/03/23 职场文书
安全主题班会教案
2015/08/12 职场文书
学校教代会开幕词
2016/03/04 职场文书
python字典进行运算原理及实例分享
2021/08/02 Python
python调用ffmpeg命令行工具便捷操作视频示例实现过程
2021/11/01 Python
集英社今正式宣布 成立游戏公司“集英社Games”
2022/03/31 其他游戏
Flutter Navigator 实现路由传递参数
2022/04/22 Java/Android
SQL Server一个字符串拆分多行显示或者多行数据合并成一个字符串
2022/05/25 SQL Server