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 相关文章推荐
JQuery 表单中textarea字数限制实现代码
Dec 07 Javascript
按给定几率进行随机抽取的js代码
Dec 28 Javascript
关于jquery css的使用介绍
Apr 18 Javascript
使用GruntJS构建Web程序之安装篇
Jun 04 Javascript
JS获得选取checkbox整行数据的方法
Jan 28 Javascript
flash+jQuery实现可关闭及重复播放的压顶广告
Apr 15 Javascript
javascript中CheckBox全选终极方案
May 20 Javascript
AngularJS 路由和模板实例及路由地址简化方法(必看)
Jun 24 Javascript
深入理解JavaScript函数参数(推荐)
Jul 26 Javascript
浅析ES6的八进制与二进制整数字面量
Aug 30 Javascript
详解vue组件通信的三种方式
Jun 30 Javascript
AngularJS实现进度条功能示例
Jul 05 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
PHP4实际应用经验篇(3)
2006/10/09 PHP
解析php5配置使用pdo
2013/07/03 PHP
thinkphp实现like模糊查询实例
2014/10/29 PHP
使用ThinkPHP生成缩略图及显示
2017/04/27 PHP
thinkphp5.0自定义验证规则使用方法
2017/11/16 PHP
JQuery中each()的使用方法说明
2010/08/19 Javascript
Google Map V3 绑定气泡窗口(infowindow)Dom事件实现代码
2013/04/26 Javascript
动态创建script标签实现跨域资源访问的方法介绍
2014/02/28 Javascript
javascript弹出拖动窗口
2015/08/11 Javascript
Angularjs整合微信UI(weui)
2016/03/15 Javascript
js常用的继承--组合式继承
2017/03/06 Javascript
使用canvas及js简单生成验证码方法
2017/04/02 Javascript
bootstrap如何让dropdown menu按钮式下拉框长度一致
2017/04/10 Javascript
使用mint-ui开发项目的一些心得(分享)
2017/09/07 Javascript
深入浅出webpack之externals的使用
2017/12/04 Javascript
使用vue + less 实现简单换肤功能的示例
2018/02/21 Javascript
vue+element的表格实现批量删除功能示例代码
2018/08/17 Javascript
Javascript实现一朵从含苞到绽放的玫瑰
2019/03/30 Javascript
NodeJS实现一个聊天室功能
2019/11/25 NodeJs
[52:12]FNATIC vs Infamous 2019国际邀请赛小组赛 BO2 第一场 8.16
2019/08/19 DOTA
Python使用time模块实现指定时间触发器示例
2017/05/18 Python
pytorch 固定部分参数训练的方法
2019/08/17 Python
Pycharm Plugins加载失败问题解决方案
2020/11/28 Python
欧克利英国官网:Oakley英国
2019/08/24 全球购物
Perfume’s Club澳大利亚官网:西班牙领先的在线美容店
2021/02/01 全球购物
创建省级文明单位实施方案
2014/02/27 职场文书
税务干部群众路线教育实践活动对照检查材料
2014/09/20 职场文书
房屋买卖协议样本
2014/11/16 职场文书
2015年优质护理服务工作总结
2015/04/08 职场文书
2015年项目工作总结
2015/04/29 职场文书
2015年高中班级工作总结
2015/07/21 职场文书
大学生先进个人主要事迹材料
2015/11/04 职场文书
受欢迎的自荐信,就这么写!
2019/04/19 职场文书
python如何在word中存储本地图片
2021/04/07 Python
vue-cli3.0修改打包后的文件名和文件地址,打包后本地运行报错解决
2022/04/06 Vue.js
Java存储没有重复元素的数组
2022/04/29 Java/Android