基于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 JavaScript获取Url参数,src属性参数
Mar 09 Javascript
javascript解决innerText浏览器兼容问题思路代码
May 17 Javascript
javascript类型系统 Array对象学习笔记
Jan 09 Javascript
动态加载js文件简单示例
Apr 21 Javascript
js弹出窗口返回值的简单实例
May 28 Javascript
鼠标经过出现气泡框的简单实例
Mar 17 Javascript
javascript和php使用ajax通信传递JSON的实例
Aug 21 Javascript
在Vue项目中使用snapshot测试的具体使用
Apr 16 Javascript
Vue 解决多级动态面包屑导航的问题
Nov 04 Javascript
JS三级联动代码格式实例详解
Dec 30 Javascript
vue路由分文件拆分管理详解
Aug 13 Javascript
vue+flask实现视频合成功能(拖拽上传)
Mar 04 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
php 高效率写法 推荐
2010/02/21 PHP
PHP 观察者模式的实现代码
2013/05/10 PHP
php开发工具有哪五款
2015/11/09 PHP
完美解决thinkphp唯一索引重复时出错的问题
2017/03/31 PHP
php 类中的常量、静态属性、非静态属性的区别
2017/04/09 PHP
PHP CURL使用详解
2019/03/21 PHP
javascript下arguments,caller,callee,call,apply示例及理解
2009/12/24 Javascript
firefox插件Firebug的使用教程
2010/01/02 Javascript
网站导致浏览器崩溃的原因总结(多款浏览器) 推荐
2010/04/15 Javascript
javascript中的数字与字符串相加实例分析
2011/08/14 Javascript
详解jQuery Mobile自定义标签
2016/01/06 Javascript
jquery动态创建div与input的实例代码
2016/10/12 Javascript
详解JavaScript调用栈、尾递归和手动优化
2017/06/03 Javascript
ReactNative实现图片上传功能的示例代码
2017/07/11 Javascript
对存在JavaScript隐式类型转换的四种情况的总结(必看篇)
2017/08/31 Javascript
vue mixins组件复用的几种方式(小结)
2017/09/06 Javascript
ES6解构赋值的功能与用途实例分析
2017/10/31 Javascript
解决option标签selected="selected"属性失效的问题
2017/11/06 Javascript
JS打印彩色菱形的实例代码
2018/08/15 Javascript
对angularjs框架下controller间的传值方法详解
2018/10/08 Javascript
Postman如何实现参数化执行及断言处理
2020/07/28 Javascript
[01:11:28]DOTA2-DPC中国联赛定级赛 RNG vs Phoenix BO3第一场 1月8日
2021/03/11 DOTA
Python入门篇之面向对象
2014/10/20 Python
python unittest实现api自动化测试
2018/04/04 Python
对python中的控制条件、循环和跳出详解
2019/06/24 Python
Django项目使用CircleCI的方法示例
2019/07/14 Python
django-rest-swagger的优化使用方法
2019/08/29 Python
Python 函数绘图及函数图像微分与积分
2019/11/20 Python
Python并发请求下限制QPS(每秒查询率)的实现代码
2020/06/05 Python
Python大批量搜索引擎图像爬虫工具详解
2020/11/16 Python
python list等分并从等分的子集中随机选取一个数
2020/11/16 Python
Python中logging日志的四个等级和使用
2020/11/17 Python
HTML5制作3D爱心动画教程 献给女友浪漫的礼物
2014/11/05 HTML / CSS
资产评估专业学生的自我鉴定
2013/11/14 职场文书
2014年幼儿园园长工作总结
2014/12/17 职场文书
VUE中的v-if与v-show区别介绍
2022/03/13 Vue.js