基于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 相关文章推荐
JScript 脚本实现文件下载 一般用于下载木马
Oct 29 Javascript
js验证框架实现代码分享
May 18 Javascript
详解AngularJS中的表单验证(推荐)
Nov 17 Javascript
es6学习笔记之Async函数的使用示例
May 11 Javascript
JS判断时间段的实现代码
Jun 14 Javascript
微信小程序使用navigateTo数据传递的实例
Sep 26 Javascript
javascript实现文件拖拽事件
Mar 29 Javascript
简单易扩展可控性强的Jquery转盘抽奖程序
Mar 16 jQuery
vue cli3 调用百度翻译API翻译页面的实现示例
Sep 13 Javascript
jQuery表单校验插件validator使用方法详解
Feb 18 jQuery
viewer.js一个强大的基于jQuery的图像查看插件(支持旋转、缩放)
Apr 01 jQuery
vue总线机制(bus)知识点详解
May 10 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
在网页中屏蔽快捷键
2006/09/06 Javascript
基于jQuery实现左右div自适应高度完全相同的代码
2012/08/09 Javascript
JQueryEasyUI Layout布局框架的使用
2013/04/08 Javascript
Javascript弹出窗口的各种方法总结
2013/11/11 Javascript
深入理解JavaScript中的传值与传引用
2013/12/09 Javascript
Javascript中对象继承的实现小例
2014/05/12 Javascript
jQuery 更改checkbox的状态,无效的解决方法
2016/07/22 Javascript
easyUI实现类似搜索框关键词自动提示功能示例代码
2016/12/27 Javascript
深入理解Angularjs向指令传递数据双向绑定机制
2016/12/31 Javascript
bootstrap中添加额外的图标实例代码
2017/02/15 Javascript
JavaScript中concat复制数组方法浅析
2019/01/20 Javascript
关于vue状态过渡transition不起作用的原因解决
2019/04/09 Javascript
手动实现vue2.0的双向数据绑定原理详解
2021/02/06 Vue.js
[02:29]完美世界高校联赛上海赛区回顾
2015/12/15 DOTA
[01:27:43]VGJ.S vs TNC Supermajor 败者组 BO3 第三场 6.6
2018/06/07 DOTA
python设计模式大全
2016/06/27 Python
Python升级导致yum、pip报错的解决方法
2017/09/06 Python
Python实现自定义函数的5种常见形式分析
2018/06/16 Python
Python pandas DataFrame操作的实现代码
2019/06/21 Python
Python 控制终端输出文字的实例
2019/07/12 Python
Django重设Admin密码过程解析
2020/02/10 Python
Python为何不支持switch语句原理详解
2020/10/21 Python
Ubuntu配置Pytorch on Graph (PoG)环境过程图解
2020/11/19 Python
python中openpyxl和xlsxwriter对Excel的操作方法
2021/03/01 Python
解决pytorch 模型复制的一些问题
2021/03/03 Python
爱奇艺VIP会员:大剧抢先看
2018/07/11 全球购物
本科生求职简历的自我评价
2013/10/21 职场文书
职业生涯规划怎么写
2013/12/29 职场文书
高校教师自荐信范文
2014/03/13 职场文书
慈善晚会策划方案
2014/05/14 职场文书
入职担保书范文
2014/05/21 职场文书
公务员个人年终总结
2015/02/12 职场文书
中国古代史学名著《战国策》概述
2019/08/09 职场文书
Python 把两层列表展开平铺成一层(5种实现方式)
2021/04/07 Python
《游戏王:大师决斗》将推出新卡牌包4月4日上线
2022/03/31 其他游戏
Vite + React从零开始搭建一个开源组件库
2022/06/25 Javascript