如果你使用的前端框架是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属性,而这两个表单元素都使用了非空验证,最终效果如下:
从结果可以看出,如果要验证一个表单项,则该表单项必须有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元素下面,则最终产生的效果如下:
当输入错误时的提示信息位置在整个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>
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();将验证器置空即可。
转自:http://blog.csdn.net/coolcaosj/article/details/38085191
相关推荐
本文给大家介绍使用Bootstrap新制作的一个登录框,带验证码,带校验,非常不错,具有参考借鉴价值,感兴趣的朋友可以参考下
bootstrap表单校验
基于Bootstrap表单验证,供大家参考,具体内容如下 GitHub地址:https://github.com/chentangchun/FormValidate 使用方式: 1.CSS样式 .valierror { border-color: red !important; } .tooltip.right .tooltip-...
能够增加兼容性的强大框架.导入需要的css和js文件(JS中username,password等键值名和input标签中name属性值对应),运行就能够进行非空,长度验证,完全不需要管css样式
主要介绍了bootstrapValidator表单校验、更改状态、新增、移除校验字段,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
对于刚开始使用bootstrap前台框架的朋友来说,表单验证或许是必不可少的。本案例中有常见的格式校验公大家参考,好不容易找到了,给需要的朋友分享一下,不需要积分,有个csdn账号即可,免去积分下载的困扰
1.引入css与js bootstrapValidator.min.css bootstrapValidator.min.js 2.html中的modal代码 aria-labelledby aria-hidden=true> <button type=
最近使用bootstrap开发项目比较多,在表单校验功能中用popover插件实现出错提示功能很方面,下面小编给大家带来了一篇关于Bootstrap的 popover插件实现校验表单提示功能的实现代码,非常不错,感兴趣的朋友一起看看...
Bootstrap响应式输入框表单验证代码基于Bootstrap3.3.5制作,响应式设计,自适应分辨率,兼容PC端和移动端,有9种输入框表单验证功能:1.文本框只能输入数字代码(小数点也不能输入);2.只能输入数字,能输小数点;3....
用bootstrap做的登录,注册页面,使用validate进行表单验证,是本人从空白页面搭建的,亲测可用,1积分算是我的辛苦费吧。 我会通过博客注明知识点:http://blog.csdn.net/qq_19558705; 希望能帮到大家。没有积分的...
动态添加表单元素,并调用bootstrapValidator的方法为表单添加校验规则,调用addField()方法实现功能。下面通过本文看下具体实现方法吧
基于bootstrap的前端校验插件,使用此插件能有效的校验表单,不用自己写了。
谈谈表单校验 这大概是一种惯例,学习前台后台最开始接触的业务都是用户注册和登录。现在社会坚持以人为本的理念,在网站开发过程同样如此。User是我们面对较多的对象,也是较核心的对象。最开始的用户注册和登陆...
表单校验是页面开发中非常常见的一类需求,相信每个前端开发人员都有这方面的经验。网上有很多成熟的表单校验框架,虽然按照它们默认的设计,用起来没有多大的问题,但是在实际工作中,表单校验有可能有比较复杂的...
主要介绍了BootStrap表单验证中的非Submit类型按钮点击时触发验证的坑,本文给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下
动态添加input并动态添加...且项目ajax的时候不是用的form表单提交,而是自己并接成json提交,所以x,y的name的名字一样。 好开始: 首先是在html里面必须要有一个 “+” 标记为addPos,然后有一个“-” 标记为“remov
angular-bootstrap-show-errors, Bootstrap的Angular 指令以智能显示表单验证错误 Angular Bootstrap 显示错误Bootstrap 3的Angular 指令,智能地将'有错误'类应用于无效的表单字段。查看AngularJS中正确完成的 ...