基于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操纵Cookie实现购物车程序
Feb 15 Javascript
javascript获取xml节点的最大值(实现代码)
Dec 11 Javascript
jQuery中[attribute!=value]选择器用法实例
Dec 31 Javascript
jQuery事件绑定方法学习总结(推荐)
Nov 21 Javascript
JS实现图片垂直居中显示小结
Dec 13 Javascript
如何理解Vue的v-model指令的使用方法
Jul 19 Javascript
vue favicon设置以及动态修改favicon的方法
Dec 21 Javascript
vue滚动tab跟随切换效果
Jun 29 Javascript
Javascript摸拟自由落体与上抛运动原理与实现方法详解
Apr 08 Javascript
vue项目中微信登录的实现操作
Sep 08 Javascript
基于jQuery拖拽事件的封装
Nov 29 jQuery
JavaScript实现浏览器网页自动滚动并点击的示例代码
Dec 05 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
cache_lite试用
2007/02/14 PHP
php 进度条实现代码
2009/03/10 PHP
php增删改查示例自己写的demo
2013/09/04 PHP
php生成缩略图示例代码分享(使用gd库实现)
2014/01/20 PHP
Laravel 自定命令以及生成文件的例子
2019/10/23 PHP
javascript 构造函数强制调用经验总结
2012/12/02 Javascript
基于jquery扩展漂亮的下拉框可以二次修改
2013/11/19 Javascript
JavaScript数字和字符串转换示例
2014/03/26 Javascript
nodeJS代码实现计算交社保是否合适
2015/03/09 NodeJs
Jquery常用的方法汇总
2015/09/01 Javascript
JS实现获取剪贴板内容的方法
2016/06/21 Javascript
JavaScript实现的微信二维码图片生成器的示例
2016/10/26 Javascript
Javascript 两种刷新方法以及区别和适用范围
2017/01/17 Javascript
js获取浏览器和屏幕的各种宽度高度
2017/02/22 Javascript
javascript实现日期三级联动下拉框选择菜单
2020/12/03 Javascript
Angular限制input框输入金额(是小数的话只保留两位小数点)
2017/07/13 Javascript
基于nodejs res.end和res.send的区别
2018/05/14 NodeJs
使用ESLint禁止项目导入特定模块的方法步骤
2019/03/04 Javascript
详解Vue源码中一些util函数
2019/04/24 Javascript
Python3.6正式版新特性预览
2016/12/15 Python
Python进程间通信之共享内存详解
2017/10/30 Python
python Flask 装饰器顺序问题解决
2018/08/08 Python
opencv实现静态手势识别 opencv实现剪刀石头布游戏
2019/01/22 Python
Django中ajax发送post请求 报403错误CSRF验证失败解决方案
2019/08/13 Python
python GUI编程(Tkinter) 创建子窗口及在窗口上用图片绘图实例
2020/03/04 Python
Keras模型转成tensorflow的.pb操作
2020/07/06 Python
使用 HTML5 Canvas 制作水波纹效果点击图片就会触发
2014/09/15 HTML / CSS
美国在线面料商店:Fashion Fabrics Club
2020/01/31 全球购物
工程造价专业大学生自荐信
2013/10/01 职场文书
澳大利亚商务邀请函
2014/01/17 职场文书
小学生环保演讲稿
2014/04/25 职场文书
给妈妈洗脚活动方案
2014/08/16 职场文书
2014年禁毒工作总结
2014/11/24 职场文书
2014年房产销售工作总结
2014/12/08 职场文书
毕业论文指导老师意见
2015/06/04 职场文书
2016年质量月活动总结报告
2016/04/05 职场文书