基于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实现锚点(Anchor)间平滑跳转
Sep 08 Javascript
Javascript load Page,load css,load js实现代码
Mar 31 Javascript
避免 showModalDialog 弹出新窗体的原因分析
May 31 Javascript
JavaScript子窗口ModalDialog中操作父窗口对像
Dec 11 Javascript
js实现网页自动刷新可制作节日倒计时效果
May 27 Javascript
JS实现带圆弧背景渐变效果的导航菜单代码
Oct 13 Javascript
JavaScript如何实现图片懒加载(lazyload) 提高用户体验(增强版)
Nov 30 Javascript
Bootstrap模态框插件使用详解
May 11 Javascript
详解JavaScript中的函数、对象
Apr 01 Javascript
利用JS代码自动删除稿件的普通弹幕功能
Sep 20 Javascript
Vue数字输入框组件示例代码详解
Jan 15 Javascript
node.js基于dgram数据报模块创建UDP服务器和客户端操作示例
Feb 12 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
BBS(php & mysql)完整版(三)
2006/10/09 PHP
基于laravel制作APP接口(API)
2016/03/15 PHP
php+redis在实际项目中HTTP 500: Internal Server Error故障排除
2017/02/05 PHP
javascript 播放器 控制
2007/01/22 Javascript
js/jquery获取文本框输入焦点的方法
2014/03/04 Javascript
js实现鼠标感应图片展示的方法
2015/02/27 Javascript
轻松实现js弹框显示选项
2016/09/13 Javascript
微信小程序开发一键登录 获取session_key和openid实例
2016/11/23 Javascript
两种简单的跨域方法(jsonp、php)
2017/01/02 Javascript
利用js定义一个导航条菜单
2017/03/14 Javascript
jQuery Json数据格式排版高亮插件json-viewer.js使用方法详解
2017/06/12 jQuery
JS实现table表格内针对某列内容进行即时搜索筛选功能
2018/05/11 Javascript
JavaScript偏函数与柯里化实例详解
2019/03/27 Javascript
nodejs实现用户登录路由功能
2019/05/22 NodeJs
详解React的回调渲染模式
2020/09/10 Javascript
[01:10:57]Liquid vs OG 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/17 DOTA
python中for语句简单遍历数据的方法
2015/05/07 Python
python flask中静态文件的管理方法
2018/03/20 Python
python中单例常用的几种实现方法总结
2018/10/13 Python
使用python3构建文件传输的方法
2019/02/13 Python
使用python获取邮箱邮件的设置方法
2019/09/20 Python
python matplotlib饼状图参数及用法解析
2019/11/04 Python
Python类中的装饰器在当前类中的声明与调用详解
2020/04/15 Python
美国著名的品牌折扣店:Burlington
2017/06/08 全球购物
Raffaello Network西班牙:意大利拉斐尔时尚购物网
2019/03/12 全球购物
澳大利亚Rockwear官网:女子瑜伽、健身和运动服
2021/01/26 全球购物
儿科护士实习自我鉴定
2013/10/17 职场文书
商场经理竞聘演讲稿
2014/01/01 职场文书
培训讲师邀请函
2014/01/10 职场文书
集体婚礼证婚词
2014/01/13 职场文书
校园广播稿500字
2014/02/04 职场文书
党员学习群众路线心得体会
2014/11/04 职场文书
青年教师听课心得体会
2016/01/15 职场文书
nginx简单配置多个server的方法
2021/03/31 Servers
Springboot集成阿里云OSS上传文件系统教程
2021/06/28 Java/Android
mybatis3中@SelectProvider传递参数方式
2021/08/04 Java/Android