妙用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 相关文章推荐
IE与Firefox下javascript getyear年份的兼容性写法
Dec 20 Javascript
js Date概念详细介绍
Nov 22 Javascript
jQuery插件DataTable使用方法详解(.Net平台)
Dec 22 Javascript
angular实现商品筛选功能
Feb 01 Javascript
swiper移动端轮播插件(触碰图片之后停止轮播)
Dec 28 Javascript
angularjs实现的购物金额计算工具示例
May 08 Javascript
JavaScript实现读取与输出XML文件数据的方法示例
Jun 05 Javascript
微信小程序访问豆瓣电影api的实现方法
Mar 31 Javascript
基于vue框架手写一个notify插件实现通知功能的方法
Mar 31 Javascript
Webpack4+Babel7+ES6兼容IE8的实现
Apr 10 Javascript
vue中$refs, $emit, $on, $once, $off的使用详解
May 26 Javascript
Vue使用axios出现options请求方法
May 30 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
thinkphp中html:list标签传递多个参数实例
2014/10/30 PHP
Yii 2.0实现联表查询加搜索分页的方法示例
2017/08/02 PHP
PHP面向对象五大原则之单一职责原则(SRP)详解
2018/04/04 PHP
Javascript模块模式分析
2008/05/16 Javascript
非常强大的 jQuery.AsyncBox 弹出对话框插件
2011/08/29 Javascript
Jquery 的扩展方法总结
2011/10/01 Javascript
JS重要知识点小结
2011/11/06 Javascript
jquery验证表单中的单选与多选实例
2013/08/18 Javascript
jQuery 无限级菜单的简单实例
2014/02/21 Javascript
使用jquery解析XML的方法
2014/09/05 Javascript
jQuery中detach()方法用法实例
2014/12/25 Javascript
深入分析JSON编码格式提交表单数据
2015/06/25 Javascript
js图片翻书效果代码分享
2015/08/20 Javascript
基于jquery实现鼠标滚轮驱动的图片切换效果
2015/10/26 Javascript
浅析js绑定事件的常用方法
2016/05/15 Javascript
JavaScript制作简单分页插件
2016/09/11 Javascript
3种不同的ContextMenu右键菜单实现代码
2016/11/03 Javascript
原生JS中slice()方法和splice()区别
2017/03/06 Javascript
微信小程序 列表的上拉加载和下拉刷新的实现
2017/04/01 Javascript
jQuery实现返回顶部按钮和scroll滚动功能[带动画效果]
2017/07/05 jQuery
详解tween.js的使用教程
2017/09/14 Javascript
利用es6 new.target来对模拟抽象类的方法
2019/05/10 Javascript
VUE 项目在IE11白屏报错 SCRIPT1002: 语法错误的解决
2020/09/27 Javascript
Python调用系统底层API播放wav文件的方法
2017/08/11 Python
微信跳一跳小游戏python脚本
2018/01/05 Python
Python Paramiko模块的使用实际案例
2018/02/01 Python
Python读写zip压缩文件的方法
2018/08/29 Python
详解一种用django_cache实现分布式锁的方式
2019/09/01 Python
Python3打包exe代码2种方法实例解析
2020/02/17 Python
Python爬虫爬取杭州24时温度并展示操作示例
2020/03/27 Python
html5自带表单验证体验优化及提示气泡修改功能
2017/09/12 HTML / CSS
群众路线教育党课主持词
2014/04/01 职场文书
2014年网络管理员工作总结
2014/12/01 职场文书
大学生思想道德自我评价
2015/03/09 职场文书
2015年小学中秋节活动总结
2015/03/23 职场文书
首都博物馆观后感
2015/06/05 职场文书