基于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 相关文章推荐
javascript 面向对象编程 聊聊对象的事
Sep 17 Javascript
JavaScript中获取未知对象属性的代码
Apr 27 Javascript
js中根据字数截取字符串,不能截断url
Jan 12 Javascript
JavaScript版的TwoQueues缓存模型
Dec 29 Javascript
javascript伸缩型菜单实现代码
Nov 16 Javascript
Js+Ajax,Get和Post在使用上的区别小结
Jun 08 Javascript
基于Bootstrap的UI扩展 StyleBootstrap
Jun 17 Javascript
Jquery根据浏览器窗口改变调整大小的方法
Feb 07 Javascript
angular中实现控制器之间传递参数的方式
Apr 24 Javascript
Javascript快速实现浏览器系统通知
Aug 26 Javascript
js 函数性能比较方法
Aug 24 Javascript
vue使用video插件vue-video-player详解
Oct 23 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
php操作xml
2013/10/27 PHP
php版淘宝网查询商品接口代码示例
2014/06/17 PHP
详解WordPress中提醒安装插件以及隐藏插件的功能实现
2015/12/25 PHP
解决yii2左侧菜单子级无法高亮问题的方法
2016/05/08 PHP
JQuery获取浏览器窗口内容部分高度的代码
2012/02/24 Javascript
JS 去前后空格大全(IE9亲测)
2013/07/15 Javascript
js 显示base64编码的二进制流网页图片
2014/04/04 Javascript
javascript作用域链(Scope Chain)用法实例解析
2015/11/30 Javascript
JSON 的正确用法探讨:Pyhong、MongoDB、JavaScript与Ajax
2016/05/15 Javascript
表单中单选框添加选项和移除选项
2016/07/04 Javascript
AngularJS ng-bind 指令简单实现
2016/07/30 Javascript
用自定义图片代替原生checkbox实现全选,删除以及提交的方法
2016/10/18 Javascript
JS敏感词过滤代码
2016/12/23 Javascript
JS Object.preventExtensions(),Object.seal()与Object.freeze()用法实例分析
2018/08/25 Javascript
原生js实现随机点餐效果
2019/12/10 Javascript
原生JavaScript实现五子棋游戏
2020/11/09 Javascript
[00:12]DAC2018 天才少年转战三号位,他的SOLO是否仍如昔日般强大?
2018/04/06 DOTA
在Python中处理日期和时间的基本知识点整理汇总
2015/05/22 Python
用python记录运行pid,并在需要时kill掉它们的实例
2017/01/16 Python
Pycharm技巧之代码跳转该如何回退
2017/07/16 Python
python实现识别手写数字 python图像识别算法
2020/03/23 Python
python flask中静态文件的管理方法
2018/03/20 Python
python3使用pandas获取股票数据的方法
2018/12/22 Python
Python3.5 win10环境下导入kera/tensorflow报错的解决方法
2019/12/19 Python
Python ATM功能实现代码实例
2020/03/19 Python
Django分组聚合查询实例分享
2020/04/29 Python
自学python用什么系统好
2020/06/23 Python
PyTorch: Softmax多分类实战操作
2020/07/07 Python
Python3如何使用tabulate打印数据
2020/09/25 Python
python Selenium 库的使用技巧
2020/10/16 Python
申报职称专业技术个人的自我评价
2013/12/12 职场文书
勾股定理课后反思
2014/04/26 职场文书
创业女性典型材料
2014/05/02 职场文书
毕业论文致谢格式模板
2015/05/14 职场文书
军事博物馆观后感
2015/06/05 职场文书
Mysql MVCC机制原理详解
2021/04/20 MySQL