妙用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学习笔记之创建DOM元素
Jan 19 Javascript
jquery实现移动端点击图片查看大图特效
Sep 11 Javascript
由浅入深讲解Javascript继承机制与simple-inheritance源码分析
Dec 13 Javascript
js实现(全选)多选按钮的方法【附实例】
Mar 30 Javascript
jQuery的ajax和遍历数组json实例代码
Aug 01 Javascript
jQuery中ajax错误调试分析
Dec 01 Javascript
利用Bootstrap实现表格复选框checkbox全选
Dec 21 Javascript
JS常用倒计时代码实例总结
Feb 07 Javascript
Bootstrap表单简单实现代码
Mar 06 Javascript
浅谈vuepress 踩坑记
Apr 18 Javascript
浅谈webpack和webpack-cli模块源码分析
Jan 19 Javascript
Vue使用Element实现增删改查+打包的步骤
Nov 25 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
德生PL550的电路分析
2021/03/02 无线电
基于文本的留言簿
2006/10/09 PHP
php的GD库imagettftext函数解决中文乱码问题
2015/01/24 PHP
Symfony2 session用法实例分析
2016/02/04 PHP
ThinkPHP实现转换数据库查询结果数据到对应类型的方法
2017/11/16 PHP
PHP如何防止XSS攻击与XSS攻击原理的讲解
2019/03/22 PHP
理解Javascript_08_函数对象
2010/10/15 Javascript
基于jQuery的倒计时插件代码
2011/05/07 Javascript
js中parseFloat(参数1,参数2)定义和用法及注意事项
2013/01/27 Javascript
你必须知道的JavaScript 变量命名规则详解
2013/05/07 Javascript
点击弹出层外区域关闭弹出层jquery特效示例
2013/08/25 Javascript
JavaScript简单表格编辑功能实现方法
2015/04/16 Javascript
Javascript生成全局唯一标识符(GUID,UUID)的方法
2016/02/27 Javascript
vue-lazyload图片延迟加载插件的实例讲解
2018/02/09 Javascript
使用 js 简单的实现 bind、call 、aplly代码实例
2019/09/07 Javascript
微信小程序 wx.getUserInfo引导用户授权问题实例分析
2020/03/09 Javascript
简单谈谈offsetleft、offsetTop和offsetParent
2020/12/04 Javascript
PyQt5实现无边框窗口的标题拖动和窗口缩放
2018/04/19 Python
django之跨表查询及添加记录的示例代码
2018/10/16 Python
利用python-pypcap抓取带VLAN标签的数据包方法
2019/07/23 Python
Python使用itchat模块实现简单的微信控制电脑功能示例
2019/08/26 Python
matlab中imadjust函数的作用及应用举例
2020/02/27 Python
深入了解Python enumerate和zip
2020/07/16 Python
python IP地址转整数
2020/11/20 Python
python输出国际象棋棋盘的实例分享
2020/11/26 Python
css3与html5实现响应式导航菜单(导航栏)效果分享
2014/02/12 HTML / CSS
HTML5拖拽文件到浏览器并实现文件上传下载功能代码
2013/06/06 HTML / CSS
英国领先的男士服装和时尚零售商:Burton
2017/01/09 全球购物
Topman美国官网:英国著名的国际平价时尚男装品牌
2017/12/22 全球购物
大学生职业生涯规划书范文
2014/01/04 职场文书
入党思想汇报
2014/01/05 职场文书
《雨点》教学反思
2014/02/12 职场文书
歼十出击观后感
2015/06/11 职场文书
校园安全主题班会
2015/08/12 职场文书
图解上海144收音机
2021/04/22 无线电
win10键盘驱动怎么修复?Win10键盘驱动修复小技巧
2022/04/06 数码科技