基于jQuery 实现bootstrapValidator下的全局验证


Posted in Javascript onDecember 07, 2015

BootstrapValidator 是一款专门针对Boostrap v3的表单检验jQuery插件,能够实现众多常用的检验功能,并且易于扩展,还支持中文!对于bootstrap用户来说能够开箱即用。

前置:

引入jQuery、bootstrap、bootstrapValidator

问题描述:

项目中要求所有的表单输入框中都不能输入&符号。没有在bootstrap中找到有方法可用,只能自己动手了

思路:

使用正则。

分两种情况,第一种,如果输入框有自身的正则验证则不用去管(一般来说使用正则验证是严格控制输入的);第二种,如果没有正则则需要添加不能输入&的正则。

需要重载bootstrapValidator初始化函数,根据上面的两种情况修正初始化的设置项。最后要恢复原来的bootstrapValidator函数(这一步是必须的,原来的bootstrapValidator函数有自己的一大堆关联的东东,不能丢失);

实现:

/*add chenhua 2015.10.16 重写bootstrapValidator方法?给每一个验证项都添加禁止输入"&"符号*/ 
$(function(){//保存原始的bootstrapValidator 

var overwrite = $.fn.bootstrapValidator; 
//重载bootstrapValidator

$.fn.bootstrapValidator = function(options){ 


//恢复原来的bootstrapValidator,因为其加了很多数据是不能丢失的 


$.fn.bootstrapValidator = overwrite; 
        

//这里有两种做法,第一种是直接修改arguments内容,使其包含不能输入&的验证,然后调用即可;

//第二种是先使用arguments来初始化,然后使用调用bootstrapValidator的函数来给非正则表达式验证的项添加不能输入&的验证

//这里我们使用了第二中。



var validtor = overwrite.apply(this,arguments); 


if($.type(arguments[0]) == "object"){ 



var vtor = this.data("bootstrapValidator"),


//过滤出输入框表单项
 



fileds = this.find("input[name][type='hidden'],input[name][type='password'],input[name][type='text'],textarea[name]").not(":disabled,[type='hidden']"); 



fileds.each(function(){ 




//本身没有正则验证才添加不能输入&的验证 




if(!vtor.getOptions($(this).attr('name'),'regexp','regexp')){ 
       
vtor.addField($(this).attr('name'), 






{ 







validators: { 








regexp: { 









regexp: /^[^&]*$/, 









message: "不能包含&字符" 








} 







} 





}) 




} 



}) 


} 


return validtor; 

} 
})

以上内容是三水点靠木小编给大家介绍的基于jQuery 实现bootstrapValidator下的全局验证,希望大家喜欢。

Javascript 相关文章推荐
JS定时刷新页面及跳转页面的方法
Jul 04 Javascript
javascript常见操作汇总
Sep 03 Javascript
javascript元素动态创建实现方法
May 13 Javascript
jQuery实现Select左右复制移动内容
Aug 05 Javascript
JavaScript实现输入框与清空按钮联动效果
Sep 09 Javascript
jQuery实现字符串全部替换的方法
Dec 12 Javascript
vue如何实现observer和watcher源码解析
Mar 09 Javascript
JS库之Waypoints的用法详解
Sep 13 Javascript
VS Code转换大小写、修改选中文字或代码颜色的方法
Dec 15 Javascript
vue使用技巧及vue项目中遇到的问题
Jun 04 Javascript
JS中‘hello’与new String(‘hello’)引出的问题详解
Aug 14 Javascript
vue响应式更新机制及不使用框架实现简单的数据双向绑定问题
Jun 27 Javascript
JavaScript的代码编写格式规范指南
Dec 07 #Javascript
JSON遍历方式实例总结
Dec 07 #Javascript
JS实现日期时间动态显示的方法
Dec 07 #Javascript
基于jQuey实现鼠标滑过变色(整行变色)
Dec 07 #Javascript
js实现遍历含有input的table实例
Dec 07 #Javascript
JavaScript中的return语句简单介绍
Dec 07 #Javascript
深入理解Java线程编程中的阻塞队列容器
Dec 07 #Javascript
You might like
Eclipse中php插件安装及Xdebug配置的使用详解
2013/04/25 PHP
PHP实现小程序批量通知推送
2018/11/27 PHP
Prototype Selector对象学习
2009/07/23 Javascript
jquery验证手机号是否正确实例讲解
2015/11/17 Javascript
jQuery简单实现input文本框内灰色提示文本效果的方法
2015/12/02 Javascript
JavaScript实现弹出模态窗体并接受传值的方法
2016/02/12 Javascript
WebPack基础知识详解
2017/01/16 Javascript
Angular开发者指南之入门介绍
2017/03/05 Javascript
react-router中的属性详解
2017/06/01 Javascript
详解vue模拟加载更多功能(数据追加)
2017/06/23 Javascript
Angular2 组件间通过@Input @Output通讯示例
2017/08/24 Javascript
详解js中Array的方法及技巧
2018/09/12 Javascript
使用Bootstrap做一个朝代历史表
2019/12/10 Javascript
微信小程序调用wx.getImageInfo遇到的坑解决
2020/05/31 Javascript
vue 调用 RESTful风格接口操作
2020/08/11 Javascript
如何在 ant 的table中实现图片的渲染操作
2020/10/28 Javascript
Python科学计算之Pandas详解
2017/01/15 Python
python函数式编程学习之yield表达式形式详解
2018/03/25 Python
Python rstrip()方法实例详解
2018/11/11 Python
Django+Uwsgi+Nginx如何实现生产环境部署
2020/07/31 Python
一款利用html5和css3实现的3D滚动特效的教程
2015/01/04 HTML / CSS
CSS3实现点击放大的动画实例代码
2017/02/27 HTML / CSS
canvas实现高阶贝塞尔曲线(N阶贝塞尔曲线生成器)
2018/01/10 HTML / CSS
Alba Moda瑞士网上商店:独家意大利时尚女装销售
2016/11/28 全球购物
美国休闲服装品牌:J.Crew Factory
2017/03/04 全球购物
ONLY德国官方在线商店:购买时尚女装
2017/09/21 全球购物
什么是servlet
2012/05/08 面试题
护士自荐信怎么写
2013/10/18 职场文书
给幼儿园老师的表扬信
2014/01/19 职场文书
残疾人创业典型事迹
2014/02/01 职场文书
全国道德模范事迹
2014/02/01 职场文书
门前三包责任书
2014/04/15 职场文书
付款委托书范本
2014/10/05 职场文书
2014年卫生工作总结
2014/11/27 职场文书
写给同事的离职感言
2015/08/04 职场文书
Windows11插耳机没反应怎么办? win11耳机没声音的多种解决办法
2021/11/21 数码科技