基于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面向对象、prototype、call()、apply()
May 14 Javascript
js里怎么取select标签里的值并修改
Dec 10 Javascript
jQuery实现鼠标移到元素上动态提示消息框效果
Oct 20 Javascript
jQuery技巧之让任何组件都支持类似DOM的事件管理
Apr 05 Javascript
Bootstrap表格和栅格分页实例详解
May 20 Javascript
浅谈Node.js:fs文件系统模块
Dec 08 Javascript
vue2.X组件学习心得(新手必看篇)
Jul 05 Javascript
vue父组件通过props如何向子组件传递方法详解
Aug 16 Javascript
在 Angular中 使用 Lodash 的方法
Feb 11 Javascript
Vue3.0 响应式系统源码逐行分析讲解
Oct 14 Javascript
Node.js API详解之 tty功能与用法实例分析
Apr 27 Javascript
ES6中的Javascript解构的实现
Oct 30 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 __autoload函数(自动载入类文件)的使用方法
2012/02/04 PHP
Zend Framework教程之Resource Autoloading用法实例
2016/03/08 PHP
Google Map Api和GOOGLE Search Api整合实现代码
2009/07/18 Javascript
使用jquery mobile做幻灯播放效果实现步骤
2013/01/04 Javascript
javascript打印输出json实例
2013/11/11 Javascript
nodejs npm package.json中文文档
2014/09/04 NodeJs
Extjs grid panel自带滚动条失效的解决方法
2014/09/11 Javascript
JavaScript中boolean类型之三种情景实例代码
2016/11/21 Javascript
浅述Javascript的外部对象
2016/12/07 Javascript
用move.js库实现百叶窗特效
2017/02/08 Javascript
vue2.X组件学习心得(新手必看篇)
2017/07/05 Javascript
基于JavaScript实现带数据验证和复选框的表单提交
2017/08/23 Javascript
五步轻松实现JavaScript HTML时钟效果
2020/03/25 Javascript
Vue中render方法的使用详解
2018/01/26 Javascript
vue.js实现的经典计算器/科学计算器功能示例
2018/07/11 Javascript
微信小程序scroll-view仿拼多多横向滑动滚动条
2020/04/21 Javascript
js中int和string数据类型互相转化实例
2019/01/16 Javascript
实例讲解v-if和v-show的区别
2019/01/31 Javascript
通过JQuery,JQueryUI和Jsplumb实现拖拽模块
2019/06/18 jQuery
vue中父子组件的参数传递和应用示例
2021/01/04 Vue.js
Python使用文件锁实现进程间同步功能【基于fcntl模块】
2017/10/16 Python
Python numpy 提取矩阵的某一行或某一列的实例
2018/04/03 Python
python3.6使用urllib完成下载的实例
2018/12/19 Python
python print出共轭复数的方法详解
2019/06/25 Python
window7下的python2.7版本和python3.5版本的opencv-python安装过程
2019/10/24 Python
Django 自定义404 500等错误页面的实现
2020/03/08 Python
Django --Xadmin 判断登录者身份实例
2020/07/03 Python
Django nginx配置实现过程详解
2020/09/10 Python
P/Invoke是什么
2015/07/31 面试题
自我评价怎么写好呢?
2013/12/05 职场文书
建材业务员岗位职责
2013/12/08 职场文书
园林施工员岗位职责
2013/12/11 职场文书
财务个人年度总结范文
2015/02/26 职场文书
与死神共舞观后感
2015/06/15 职场文书
工程主管竞聘书
2015/09/15 职场文书
铁拳制作人赞《铁拳7》老头环Mod:制作精良 但别弄了
2022/04/03 其他游戏