基于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 的 prototype问题。
Jan 03 Javascript
List Information About the Binary Files Used by an Application
Jun 18 Javascript
有关js的变量作用域和this指针的讨论
Dec 16 Javascript
用js实现in_array的方法
Nov 05 Javascript
在Node.js中使用HTTP上传文件的方法
Jun 23 Javascript
js实现汉字排序的方法
Jul 23 Javascript
深入理解jQuery3.0的domManip函数
Sep 01 Javascript
jquery实现自适应banner焦点图
Feb 16 Javascript
微信小程序 在线支付功能的实现
Mar 14 Javascript
手机端转换rem适应
Apr 01 Javascript
小程序实现分类页
Jul 12 Javascript
JavaScript使用canvas绘制坐标和线
Apr 28 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中cookie和session的区别实例分析
2014/08/28 PHP
PHP实现无限极分类的两种方式示例【递归和引用方式】
2019/03/25 PHP
js 与或运算符 || && 妙用
2009/12/09 Javascript
js实现一个链接打开两个链接地址的方法
2015/05/12 Javascript
js使用cookie记录用户名的方法
2015/11/26 Javascript
适用于手机端的jQuery图片滑块动画
2016/12/09 Javascript
详解nodeJS之路径PATH模块
2017/05/31 NodeJs
使用Vue自定义数字键盘组件(体验度极好)
2017/12/19 Javascript
关于vue的语法规则检测报错问题的解决
2018/05/21 Javascript
Vue-router 中hash模式和history模式的区别
2018/07/24 Javascript
jQuery实现基本动画效果的方法详解
2018/09/06 jQuery
javascript中一些奇葩的日期换算方法总结
2018/11/14 Javascript
深入了解query和params的使用区别
2019/06/24 Javascript
vue实现全匹配搜索列表内容
2019/09/26 Javascript
Node使用Nodemailer发送邮件的方法实现
2020/02/24 Javascript
vue实现输入框自动跳转功能
2020/05/20 Javascript
JavaScript构造函数原理及实现流程解析
2020/11/19 Javascript
[03:59]5分钟带你了解什么是DOTA2(第二期)
2017/02/07 DOTA
用Python的Django框架完成视频处理任务的教程
2015/04/02 Python
Ruby元编程基础学习笔记整理
2016/07/02 Python
pyqt5实现俄罗斯方块游戏
2019/01/11 Python
python实现爬虫抓取小说功能示例【抓取金庸小说】
2019/08/09 Python
python实现上传文件到linux指定目录的方法
2020/01/03 Python
基于TensorFlow中自定义梯度的2种方式
2020/02/04 Python
Python生成随机验证码代码实例解析
2020/06/09 Python
宝塔面板成功部署Django项目流程(图文)
2020/06/22 Python
会计学应届毕业生推荐信
2013/11/04 职场文书
家长评语大全
2014/01/22 职场文书
安全生产活动月方案
2014/03/09 职场文书
购房协议书范本
2014/04/11 职场文书
车辆年检委托书范本
2014/10/14 职场文书
优秀教师先进事迹材料
2014/12/15 职场文书
文言文辞职信
2015/02/28 职场文书
2015年学校团委工作总结
2015/05/26 职场文书
单位领导婚礼致辞
2015/07/28 职场文书
微信小程序和php的登录实现
2021/04/01 PHP