妙用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 相关文章推荐
Lazy Load 延迟加载图片的 jQuery 插件
Feb 06 Javascript
jquery查找tr td 示例模拟
May 08 Javascript
jQuery+html5实现div弹出层并遮罩背景
Apr 15 Javascript
jQuery仿gmail实现fixed布局的方法
May 27 Javascript
jQuery插件pagewalkthrough实现引导页效果
Jul 05 Javascript
深入理解JS函数的参数(arguments)的使用
May 28 Javascript
将鼠标焦点定位到文本框最后(代码分享)
Jan 11 Javascript
全站最详细的Vuex教程
Apr 13 Javascript
JS中封装axios来管控api的2种方式
Sep 11 Javascript
js实现图片粘贴到网页
Dec 06 Javascript
Vue强制组件重新渲染的方法讨论
Feb 03 Javascript
vue-cli 3如何使用vue-bootstrap-datetimepicker日期插件
Feb 20 Vue.js
深入理解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网页游戏学习之Xnova(ogame)源码解读(六)
2014/06/23 PHP
PHP5.3与5.5废弃与过期函数整理汇总
2014/07/10 PHP
php发送html格式文本邮件的方法
2015/06/10 PHP
详解PHP队列的实现
2019/03/14 PHP
Colortip基于jquery的信息提示框插件在IE6下面的显示问题修正方法
2010/12/06 Javascript
js性能优化技巧
2015/11/29 Javascript
使用jQuery UI库开发Web界面的简单入门指引
2016/04/22 Javascript
js实现下拉菜单效果
2017/03/01 Javascript
从零开始学习Node.js系列教程六:EventEmitter发送和接收事件的方法示例
2017/04/13 Javascript
Angular.js初始化之ng-app的自动绑定与手动绑定详解
2017/07/31 Javascript
Angularjs渲染的 using 指令的星级评分系统示例
2017/11/09 Javascript
javaScript和jQuery自动加载简单代码实现方法
2017/11/24 jQuery
vue组件数据传递、父子组件数据获取,slot,router路由功能示例
2019/03/19 Javascript
vue模块移动组件的实现示例
2020/05/20 Javascript
基于element-ui封装表单金额输入框的方法示例
2021/01/06 Javascript
[01:29]Ti4循环赛第三日精彩回顾
2014/07/13 DOTA
浅述python中argsort()函数的实例用法
2017/03/30 Python
python文本数据相似度的度量
2018/03/12 Python
Python中的上下文管理器和with语句的使用
2018/04/17 Python
Python面向对象程序设计之私有属性及私有方法示例
2019/04/08 Python
python批量读取文件名并写入txt文件中
2020/09/05 Python
python numpy生成等差数列、等比数列的实例
2020/02/25 Python
Python openpyxl模块实现excel读写操作
2020/06/30 Python
css3.0 图形构成实例练习二
2013/03/19 HTML / CSS
美国家喻户晓的保健品品牌:Vitamin World(维他命世界)
2016/08/19 全球购物
迪拜领先运动补剂零售品牌中文站:Sporter商城
2019/08/20 全球购物
可以使用抽象函数重写基类中的虚函数吗
2013/06/02 面试题
3D空间设计学生找工作的自我评价
2013/10/28 职场文书
商场端午节活动方案
2014/01/29 职场文书
电子工程专业毕业生求职信
2014/03/14 职场文书
厨房管理计划书
2014/04/27 职场文书
文明班级建设方案
2014/05/15 职场文书
清洁工个人工作总结
2015/03/05 职场文书
给老婆的检讨书(搞笑版)
2015/05/06 职场文书
七年级作文之游记
2019/12/11 职场文书
Elasticsearch 聚合查询和排序
2022/04/19 Python