基于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 相关文章推荐
接收键盘指令的脚本
Jun 26 Javascript
执行iframe中的javascript方法
Oct 07 Javascript
深入理解Javascript闭包 新手版
Dec 28 Javascript
AngularJS整合Springmvc、Spring、Mybatis搭建开发环境
Feb 25 Javascript
详解Angular.js的$q.defer()服务异步处理
Nov 06 Javascript
AngularJS指令与控制器之间的交互功能示例
Dec 14 Javascript
js实现文字选中分享功能
Jan 25 Javascript
Javascript 严格模式use strict详解
Sep 16 Javascript
使用Vue自定义数字键盘组件(体验度极好)
Dec 19 Javascript
解决vue打包项目后刷新404的问题
Mar 06 Javascript
Vue 将后台传过来的带html字段的字符串转换为 HTML
Mar 29 Javascript
Vue使用富文本编辑器Vue-Quill-Editor(含图片自定义上传服务、清除复制粘贴样式等)
May 15 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用mysql数据库存储session的代码
2010/03/05 PHP
PHP中使用socket方式GET、POST数据实例
2015/04/02 PHP
PHP MVC框架skymvc支持多文件上传
2016/05/26 PHP
PHP 配置后台登录以及模板引入
2017/01/24 PHP
PHP开发api接口安全验证操作实例详解
2020/03/26 PHP
ASP.NET jQuery 实例12 通过使用jQuery validation插件简单实现用户注册页面验证功能
2012/02/03 Javascript
js中eval详解
2012/03/30 Javascript
jquery将一个表单序列化为一个对象的方法
2013/12/02 Javascript
jQuery获得IE版本不准确webbrowser的解决方法
2014/02/23 Javascript
Js+Jq获取URL参数的集中方法示例代码
2014/05/20 Javascript
jquery实现预览提交的表单代码分享
2014/05/21 Javascript
jQuery使用hide方法隐藏元素自身用法实例
2015/03/30 Javascript
js面向对象的写法
2016/02/19 Javascript
针对BootStrap中tabs控件的美化和完善(推荐)
2016/07/06 Javascript
AngularJS $http模块POST请求实现
2017/04/08 Javascript
利用JS实现scroll自定义滚动效果详解
2017/10/17 Javascript
node.js实现为PDF添加水印的示例代码
2018/12/05 Javascript
微信小程序实现发送模板消息功能示例【通过openid推送消息给用户】
2019/05/05 Javascript
javascript实现倒计时效果
2020/02/17 Javascript
详解python单例模式与metaclass
2016/01/15 Python
python如何实现反向迭代
2018/03/20 Python
python实现串口自动触发工作的示例
2019/07/02 Python
使用pyshp包进行shapefile文件修改的例子
2019/12/06 Python
CSS3 分类菜单效果
2019/05/27 HTML / CSS
美国工业用品采购网站:Zoro.com
2020/10/27 全球购物
什么是Linux虚拟文件系统VFS
2015/08/25 面试题
介绍一些UNIX常用简单命令
2014/11/11 面试题
法学专业本科生自荐信范文
2013/12/17 职场文书
对外汉语教师推荐信
2015/03/27 职场文书
2015年消防工作总结
2015/04/24 职场文书
2015年党员发展工作总结
2015/05/13 职场文书
小学教师暑期培训心得体会
2016/01/09 职场文书
某学校的2019年度工作报告范本
2019/10/11 职场文书
使用CSS实现小三角边框原理解析
2021/11/07 HTML / CSS
讨论nginx location 顺序问题
2022/05/30 Servers
Python绘制散点图之可视化神器pyecharts
2022/07/07 Python