妙用Bootstrap的 popover插件实现校验表单提示功能


Posted in Javascript onAugust 29, 2016

最近的项目,用Bootstrap比较多。浏览Bootstrap文档,发现 popover 插件特别适合做表单校验出错的提示。

因为使的非常频繁,最近把它封住下,做成 jQuery的插件。 通过 本插件,在 html标签中 定义好 data-vaild=”校验正则” data-errmsg=”错误信息即可”。为什么 要把 校验规则 写到 html 标签中呢?因为 我还用它做了 后台 的校验规则(后台没用Node,现在用的ASP,忙完专门再发文写下原理)。

<input class="form-control" id="u_exam_idnumber" name="u_exam_idnumber" placeholder="请输入中考准考证号" data-vaild="^\d{5,20}$" data-errmsg="准考证号码不正确,仅能包含数字"

最终实现的效果如下:

妙用Bootstrap的 popover插件实现校验表单提示功能

插件代码如下:

"use strict";
/*
jQuery+Bootstrap 校验表单 by Miaoqiyuan.cn
原理:http://www.miaoqiyuan.cn/p/jquery-bootstrap-vaild
演示:http://www.miaoqiyuan.cn/products/vaild/index.html
源码:http://www.miaoqiyuan.cn/products/vaild/jQuery.Vaild.js
*/
(function(jQuery){
$.extend({
Vaild : function(_this){
if( !!$(_this).data("vaild") ){
var pattern = new RegExp($(_this).data("vaild"));
if( pattern.test( $(_this).val() ) ){
$(_this).parent().removeClass("has-error").addClass("has-success");
$(_this).popover("destroy");
}else{
$(_this).parent().addClass("has-error").removeClass("has-success");
$(_this).data("toogle", "top").data("placement", "top").data("container", "body").data("content", $(_this).data("errmsg")).popover({"trigger":"manual"}).popover("show");
return false;
}
}else{
$(_this).parent().addClass("has-success");
}
return true;
}
});
$.fn.extend({
Vaild : function(){
$(this).each(function(index, _this){
$(_this).submit(function(){
var checkResult = true;
for(var i = 0 ; i < _this.length; i++ ){
checkResult = $.Vaild(_this[i]) && checkResult;
}
return checkResult;
});
for(var i = 0 ; i < _this.length; i++ ){
$(_this[i]).blur(function(){
$.Vaild(this);
});
}
});
}
});
})(jQuery);

调用的时候非常简单,直接使用以下代码:

<script>
$("form").Vaild();
</script>

当表单失去焦点时,如果不合法,会直接提示错误。点击提交时,如果有表单项目不合法,会阻止表单继续提交。

popoover默认的背景是 白色的,不能起到 警示作用,而且 padding 设置过大,太占用空间了。 最后调整下CSS,就实现了 截图的效果。

/*重构 popover */
.popover{background:#C00;color:#FFF;}
.popover .popover-content{padding:1px 5px;}
.popover.top>.arrow:after{border-top-color:#C00;}
/*重构 bootstrap 默认错误提示 */
.has-error input,
.has-error textarea,
.has-error select{background-color:#F2DEDE;}
.has-success input,
.has-success textarea,
.has-success select{background-color:#DFF0D8}

以上所述是小编给大家介绍的Bootstrap的 popover插件实现校验表单提示功能,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
jQuery实现倒计时重新发送短信验证码功能示例
Jan 12 Javascript
jQuery实现最简单实用的分秒倒计时
Feb 05 Javascript
基于javascript的异步编程实例详解
Apr 10 Javascript
bootstrap suggest下拉框使用详解
Apr 10 Javascript
Ionic3 UI组件之Gallery Modal详解
Jun 07 Javascript
JS实现的随机排序功能算法示例
Jun 09 Javascript
JS监控关闭浏览器操作的实例详解
Sep 12 Javascript
微信小程序出现wx.navigateTo页面不跳转问题的解决方法
Dec 26 Javascript
ajax请求+vue.js渲染+页面加载的示例
Feb 11 Javascript
JS使用tween.js动画库实现轮播图并且有切换功能
Jul 17 Javascript
jQuery实现简单评论区功能
Oct 26 jQuery
js 数据类型判断的方法
Dec 03 Javascript
深入理解React中es6创建组件this的方法
Aug 29 #Javascript
Ionic默认的Tabs模板使用实例
Aug 29 #Javascript
关于Javascript回调函数的一个妙用
Aug 29 #Javascript
Javascript学习之谈谈JS的全局变量跟局部变量(推荐)
Aug 28 #Javascript
利用jQuery的动画函数animate实现豌豆发射效果
Aug 28 #Javascript
教你如何在Node.js中使用jQuery
Aug 28 #Javascript
分享JavaScript监听全部Ajax请求事件的方法
Aug 28 #Javascript
You might like
php excel类 phpExcel使用方法介绍
2010/08/21 PHP
php构造函数实例讲解
2013/11/13 PHP
PHP中4个加速、缓存扩展的区别和选用建议
2014/03/12 PHP
PHP实现json_decode不转义中文的方法
2017/05/20 PHP
thinkPHP微信分享接口JSSDK用法实例
2017/07/07 PHP
nodejs实用示例 缩址还原
2010/12/28 NodeJs
jquery 选项卡效果 新手代码
2011/07/08 Javascript
jquery原创弹出层折叠效果点击折叠弹出一个层
2014/03/12 Javascript
一个css与js结合的下拉菜单支持主流浏览器
2014/10/08 Javascript
原生javascript实现隔行换色
2015/01/04 Javascript
jquery中EasyUI实现同步树
2015/03/01 Javascript
使用Jquery实现每日签到功能
2015/04/03 Javascript
使用JavaScript脚本无法直接改变Asp.net中Checkbox控件的Enable属性的解决方法
2015/09/16 Javascript
如何通过js实现图片预览功能【附实例代码】
2016/03/30 Javascript
js简单遍历获取对象中的属性值的方法示例
2019/06/19 Javascript
解决vue页面刷新,数据丢失的问题
2020/11/24 Vue.js
Python显示进度条的方法
2014/09/20 Python
Python新手实现2048小游戏
2015/03/31 Python
matplotlib中legend位置调整解析
2017/12/19 Python
python获取网页中所有图片并筛选指定分辨率的方法
2018/03/31 Python
Django 跨域请求处理的示例代码
2018/05/02 Python
python实现简单的单变量线性回归方法
2018/11/08 Python
python3中sys.argv的实例用法
2020/04/24 Python
win10从零安装配置pytorch全过程图文详解
2020/05/08 Python
详解移动端html5页面长按实现高亮全选文本内容的兼容解决方案
2016/12/03 HTML / CSS
韩国著名的在线综合购物网站:Akmall
2016/08/07 全球购物
LODI女鞋在线商店:阿利坎特的鞋类品牌
2019/02/15 全球购物
super()与this()的区别
2016/01/17 面试题
JAVA中运算符的分类及举例
2015/09/12 面试题
毕业生的自我鉴定
2013/10/29 职场文书
综合办公室主任职责
2013/12/16 职场文书
自我评价的范文
2014/02/02 职场文书
亲子运动会的活动方案
2014/08/17 职场文书
2014年大堂经理工作总结
2014/11/21 职场文书
决心书格式范文
2015/09/23 职场文书
解决numpy和torch数据类型转化的问题
2021/05/23 Python