基于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前台分页显示后端JAVA数据响应
Mar 18 Javascript
自定义百度分享的分享按钮
Mar 18 Javascript
基于jQuery实现的双11天猫拆红包抽奖效果
Dec 01 Javascript
prototype框架中美元符号$用法分析
Jan 22 Javascript
AngularJS中的指令全面解析(必看)
May 20 Javascript
jQuery实现的纵向下拉菜单实例详解【附demo源码下载】
Jul 09 Javascript
详解vue-validator(vue验证器)
Jan 16 Javascript
vue v-model表单控件绑定详解
May 17 Javascript
vue 父组件给子组件传值子组件给父组件传值的实例代码
Apr 15 Javascript
150行Node.js实现的dns代理工具
Aug 02 Javascript
微信小程序图片加载失败时替换为默认图片的方法
Dec 09 Javascript
基于vue+echarts 数据可视化大屏展示的方法示例
Mar 09 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将字符串输出到HTML
2019/01/27 PHP
jQuery ajax BUG:object doesn't support this property or method
2010/07/06 Javascript
JavaScript 拾碎[三] 使用className属性
2010/10/16 Javascript
与jquery serializeArray()一起使用的函数,主要来方便提交表单
2011/01/31 Javascript
从URL中提取参数与将对象转换为URL查询参数的实现代码
2012/01/12 Javascript
基于jQuery的判断iPad、iPhone、Android是横屏还是竖屏的代码
2014/05/11 Javascript
node.js中的querystring.parse方法使用说明
2014/12/10 Javascript
简介AngularJS的视图功能应用
2015/06/17 Javascript
seajs学习教程之基础篇
2016/10/20 Javascript
详解Vue 全局引入bass.scss 处理方案
2018/03/26 Javascript
关于微信小程序bug记录与解决方法
2018/08/15 Javascript
用node撸一个监测复联4开售短信提醒的实现代码
2019/04/10 Javascript
jQuery 筛选器简单操作示例
2019/10/02 jQuery
Ant Design Pro 下实现文件下载的实现代码
2019/12/03 Javascript
JavaScript装箱及拆箱boxing及unBoxing用法解析
2020/06/15 Javascript
js轮播图之旋转木马效果
2020/10/13 Javascript
[00:34]TI7不朽珍藏III——纯金地穴编织者饰品展示
2017/07/15 DOTA
Python中使用动态变量名的方法
2014/05/06 Python
windows下Virtualenvwrapper安装教程
2017/12/13 Python
Python MySQLdb 使用utf-8 编码插入中文数据问题
2018/03/13 Python
详解TensorFlow查看ckpt中变量的几种方法
2018/06/19 Python
Python字典添加,删除,查询等相关操作方法详解
2020/02/07 Python
Coach澳大利亚官方网站:美国著名时尚奢侈品牌
2017/05/24 全球购物
Sephora丝芙兰泰国官方网站:国际知名化妆品购物
2017/11/15 全球购物
Lyle & Scott苏格兰金鹰官网:英国皇室御用品牌
2018/05/09 全球购物
Ever New加拿大官网:彰显女性美
2018/10/05 全球购物
计算机专业自荐信
2013/10/14 职场文书
大学生的四年学习自我评价
2013/12/13 职场文书
自我评价个人范文
2013/12/16 职场文书
个人评价范文分享
2014/01/11 职场文书
优秀党支部事迹材料
2014/01/14 职场文书
村庄绿化方案
2014/05/07 职场文书
低碳环保口号
2014/06/12 职场文书
文员转正自我鉴定怎么写
2014/09/29 职场文书
学校禁毒宣传活动总结
2015/05/08 职场文书
详解Redis的三种常用的缓存读写策略步骤
2022/05/06 Redis