基于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 相关文章推荐
jquery插件制作简单示例说明
Feb 03 Javascript
基于jQuery的图片左右无缝滚动插件
May 23 Javascript
Jquery事件的连接使用示例
Jun 18 Javascript
Node.js的包详细介绍
Jan 14 Javascript
如何利用JS通过身份证号获取当事人的生日、年龄、性别
Jan 22 Javascript
原生js编写autoComplete插件
Apr 13 Javascript
JavaScript的Vue.js库入门学习教程
May 23 Javascript
微信小程序 form组件详解及简单实例
Jan 10 Javascript
Vue实例中生命周期created和mounted的区别详解
Aug 25 Javascript
javascript input输入框模糊提示功能的实现
Sep 25 Javascript
vue表单自定义校验规则介绍
Aug 28 Javascript
深入了解Vue.js 混入(mixins)
Jul 23 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
destoon网站转移服务器后搜索汉字出现乱码的解决方法
2014/06/21 PHP
PHP中余数、取余的妙用
2015/06/29 PHP
PHP实现的mongoDB数据库操作类完整实例
2018/04/10 PHP
PHP Cli 模式设置进程名称的方法
2019/06/12 PHP
jquery 模拟类搜索框自动完成搜索提示功能(改进)
2010/05/24 Javascript
jQuery结合HTML5制作的爱心树表白动画
2015/02/01 Javascript
jQuery实现行文字链接提示效果的方法
2015/03/10 Javascript
JavaScript中获取纯正的undefined的方法
2016/03/06 Javascript
JavaScript实现Base64编码转换
2016/04/23 Javascript
JavaScript中两个字符串的匹配
2016/06/08 Javascript
Bootstrap按钮功能之查询按钮和重置按钮
2016/10/26 Javascript
vue封装第三方插件并发布到npm的方法
2017/09/25 Javascript
javascript、php关键字搜索函数的使用方法
2018/05/29 Javascript
微信小程序实现swiper切换卡内嵌滚动条不显示的方法示例
2018/12/20 Javascript
浅谈layer弹出层按钮颜色修改方法
2019/09/11 Javascript
laydate只显示时分 不显示秒的功能实现方法
2019/09/28 Javascript
vue组件内部引入外部js文件的方法
2020/01/18 Javascript
[02:03]永远的信仰DOTA2 中国军团历届国际邀请赛回顾
2016/06/26 DOTA
Python读取指定目录下指定后缀文件并保存为docx
2017/04/23 Python
python添加模块搜索路径方法
2017/09/11 Python
Python 修改列表中的元素方法
2018/06/26 Python
Python PO设计模式的具体使用
2019/08/16 Python
Python实现图片识别加翻译功能
2019/12/26 Python
TensorFlow tensor的拼接实例
2020/01/19 Python
如何导出python安装的所有模块名称和版本号到文件中
2020/06/05 Python
纯CSS3制作的简洁蓝白风格的登录模板(非IE效果更好)
2013/08/11 HTML / CSS
英国度假别墅预订:Sykes Cottages
2017/06/12 全球购物
董事长职责范文
2013/11/08 职场文书
技术总监的工作职责
2013/11/13 职场文书
幼儿园保教管理制度
2014/02/03 职场文书
二年级学生评语大全
2014/04/23 职场文书
2014年环保工作总结
2014/11/26 职场文书
2014年大学宣传部工作总结
2014/12/19 职场文书
邀请函范文
2015/02/02 职场文书
酒店财务部岗位职责
2015/04/14 职场文书
银行求职信范文
2019/05/13 职场文书