基于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重建星际争霸
Dec 22 Javascript
几个比较经典常用的jQuery小技巧
Mar 01 Javascript
自己动手制作jquery插件之自动添加删除行的实现
Oct 13 Javascript
JavaScript设计模式之外观模式实例
Oct 10 Javascript
jQuery实现tab标签自动切换的方法
Feb 28 Javascript
JS实现可点击展开与关闭的左侧广告代码
Sep 02 Javascript
bootstrap多种样式进度条展示
Dec 20 Javascript
vue-cli webpack 开发环境跨域详解
May 18 Javascript
JS中将多个逗号替换为一个逗号的实现代码
Jun 23 Javascript
react-navigation 如何判断用户是否登录跳转到登录页的方法
Dec 01 Javascript
JavaScript 如何计算文本的行数的实现
Sep 14 Javascript
vue 数据操作相关总结
Dec 17 Vue.js
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/10/09 PHP
php实现网站顶踩功能的完整前端代码
2015/07/19 PHP
Yii基于数组和对象的Model查询技巧实例详解
2015/12/28 PHP
PHP使用SWOOLE扩展实现定时同步 MySQL 数据
2017/04/09 PHP
php慢查询日志和错误日志使用详解
2021/02/27 PHP
javascript使用smipleChart实现简单图表
2015/01/02 Javascript
JavaScript实现的伸展收缩型菜单代码
2015/10/14 Javascript
详解javascript实现瀑布流列式布局
2016/01/29 Javascript
第一次动手实现bootstrap table分页效果
2016/09/22 Javascript
JS定时器用法分析【时钟与菜单中的应用】
2016/12/21 Javascript
JS实现针对给定时间的倒计时功能示例
2017/04/11 Javascript
jQuery导航条固定定位效果实例代码
2017/05/26 jQuery
详解webpack 入门总结和实践(按需异步加载,css单独打包,生成多个入口文件)
2017/06/20 Javascript
基于jQuery封装的分页组件
2017/06/26 jQuery
在vue项目中使用element-ui的Upload上传组件的示例
2018/02/08 Javascript
vue动态设置img的src路径实例
2018/09/18 Javascript
Vue的属性、方法、生命周期实例代码详解
2019/09/17 Javascript
Vue项目页面跳转时浏览器窗口上方显示进度条功能
2020/03/26 Javascript
[00:43]DOTA2小紫本全民票选福利PA至宝全方位展示
2014/11/25 DOTA
[01:09:23]KG vs TNC 2019国际邀请赛小组赛 BO2 第一场 8.15
2019/08/16 DOTA
Tensorflow简单验证码识别应用
2017/05/25 Python
Python实现随机选择元素功能
2017/09/14 Python
在Django model中设置多个字段联合唯一约束的实例
2019/07/17 Python
Python collections模块使用方法详解
2019/08/28 Python
使用Python给头像戴上圣诞帽的图像操作过程解析
2019/09/20 Python
python自动识别文本编码格式代码
2019/12/26 Python
在Mac中PyCharm配置python Anaconda环境过程图解
2020/03/11 Python
解决pycharm安装第三方库失败的问题
2020/05/09 Python
python3.9和pycharm的安装教程并创建简单项目的步骤
2021/02/03 Python
美国东北部户外服装和设备零售商:Eastern Mountain Sports
2016/10/05 全球购物
铭宣海淘转运:美国、日本、英国转运等全球转运公司
2019/09/10 全球购物
营销总经理岗位职责
2014/02/02 职场文书
市场调查策划方案
2014/06/10 职场文书
公路局群众路线教育实践活动第一阶段工作汇报
2014/10/25 职场文书
工程部部长岗位职责
2015/02/12 职场文书
2015年幼儿园学前班工作总结
2015/05/18 职场文书