基于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 相关文章推荐
Packer 3.0 JS压缩及混淆工具 下载
May 03 Javascript
javascript操作文本框readOnly
May 15 Javascript
JavaScript 数组运用实现代码
Apr 13 Javascript
jQuery动态添加的元素绑定事件处理函数代码
Aug 02 Javascript
Jqgrid表格随窗口大小改变而改变的简单实例
Dec 28 Javascript
JavaScript日期类型的一些用法介绍
Mar 02 Javascript
深入理解JS实现快速排序和去重
Oct 17 Javascript
微信小程序上传图片到服务器实例代码
Nov 07 Javascript
JS实现字符串去重及数组去重的方法示例
Apr 21 Javascript
vue ssr 实现方式(学习笔记)
Jan 18 Javascript
vue+element+Java实现批量删除功能
Apr 08 Javascript
详解element上传组件before-remove钩子问题解决
Apr 08 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 foreach循环使用详解与实例代码
2010/05/08 PHP
队列在编程中的实际应用(php)
2010/09/04 PHP
判断PHP数组是否为空的代码
2011/09/08 PHP
PHP学习笔记(一) 简单了解PHP
2014/08/04 PHP
PHP实现多维数组转字符串和多维数组转一维数组的方法
2015/08/08 PHP
Joomla简单判断用户是否登录的方法
2016/05/04 PHP
浅谈PHP封装CURL
2019/03/06 PHP
jQuery 各种浏览器下获得日期区别
2008/12/22 Javascript
javascript中的undefined和not defined区别示例介绍
2014/02/26 Javascript
javascript模拟枚举的简单实例
2014/03/06 Javascript
NodeJS学习笔记之MongoDB模块
2015/01/13 NodeJs
谈谈jQuery Ajax用法详解
2015/11/27 Javascript
JQuery中attr属性和jQuery.data()学习笔记【必看】
2016/05/18 Javascript
全面了解JS中的匿名函数
2016/06/29 Javascript
微信小程序  简单实例(阅读器)的实例开发
2016/09/29 Javascript
JS实现的ajax和同源策略(实例讲解)
2017/12/01 Javascript
vue项目中使用ueditor的实例讲解
2018/03/05 Javascript
JS中判断某个字符串是否包含另一个字符串的五种方法
2018/05/03 Javascript
关于Vue源码vm.$watch()内部原理详解
2019/04/26 Javascript
解决IOS端微信H5页面软键盘弹起后页面下方留白的问题
2019/06/05 Javascript
Vue 解决多级动态面包屑导航的问题
2019/11/04 Javascript
微信小程序实现同时上传多张图片
2020/02/03 Javascript
js判断密码强度的方法
2020/03/18 Javascript
[00:33]DOTA2上海特级锦标赛 CDEC战队宣传片
2016/03/04 DOTA
浅析python实现scrapy定时执行爬虫
2018/03/04 Python
Python用5行代码写一个自定义简单二维码
2018/10/21 Python
python 检查文件mime类型的方法
2018/12/08 Python
Python文件操作模拟用户登陆代码实例
2020/06/09 Python
英国网上电器商店:Electricshop
2020/03/15 全球购物
高中自我鉴定范文
2013/11/03 职场文书
房地产员工找工作的自我评价
2013/11/15 职场文书
预备党员承诺书
2014/03/25 职场文书
2015年污水处理厂工作总结
2015/05/26 职场文书
laravel ajax curd 搜索登录判断功能的实现
2021/04/17 PHP
windows安装 redis 6.2.6最新步骤详解
2022/04/26 Redis
服务器nginx权限被拒绝解决案例
2022/09/23 Servers