妙用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 相关文章推荐
JavaScript日期时间格式化函数分享
May 05 Javascript
DEDECMS如何为文章添加HOT NEW标志图片
Aug 14 Javascript
Bootstrap~多级导航(级联导航)的实现效果【附代码】
Mar 08 Javascript
jQuery获取及设置表单input各种类型值的方法小结
May 24 Javascript
解决easyui日期时间框ie的兼容的问题
Mar 01 Javascript
微信小程序通过保存图片分享到朋友圈功能
May 24 Javascript
10行代码实现微信小程序滑动tab切换
Dec 28 Javascript
jsonp实现百度下拉框功能的方法分析
May 10 Javascript
js中的深浅拷贝问题简析
May 10 Javascript
KnockoutJS数组比较算法实例详解
Nov 25 Javascript
vant-ui框架的一个bug(解决切换后onload不触发)
Nov 11 Javascript
Javascript使用integrity属性进行安全验证
Nov 07 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 数据库树的遍历方法
2009/02/06 PHP
php 阴历-农历-转换类代码
2012/01/16 PHP
PHP面向对象程序设计之类常量用法实例
2014/08/20 PHP
php实现博客,论坛图片防盗链的方法
2016/10/15 PHP
JavaScript 继承机制的实现(待续)
2010/05/18 Javascript
js实现点击链接后延迟3秒再跳转的方法
2015/06/05 Javascript
在JavaScript中处理字符串之link()方法的使用
2015/06/08 Javascript
完美解决js传递参数中加号和&amp;号自动改变的方法
2016/10/11 Javascript
JS焦点图,JS 多个页面放多个焦点图的实例
2016/12/08 Javascript
浅谈angularjs中响应回车事件
2017/04/24 Javascript
JavaScript实现二维坐标点排序效果
2017/07/18 Javascript
jQuery读取本地的json文件(实例讲解)
2017/10/31 jQuery
Vue的事件响应式进度条组件实例详解
2018/02/04 Javascript
JS限制输入框输入的实现代码
2018/07/02 Javascript
Vue常用指令详解分析
2018/08/19 Javascript
babel7.x和webpack4.x配置vue项目的方法步骤
2019/05/12 Javascript
使用webpack搭建vue环境的教程详解
2019/12/31 Javascript
JS实现超级好看的鼠标小尾巴特效
2020/12/01 Javascript
Python continue语句用法实例
2014/03/11 Python
Python读取数据集并消除数据中的空行方法
2018/07/12 Python
python实现自动登录
2018/09/17 Python
Python面向对象基础入门之设置对象属性
2018/12/11 Python
python输出pdf文档的实例
2020/02/13 Python
python 对任意数据和曲线进行拟合并求出函数表达式的三种解决方案
2020/02/18 Python
巴西最大的巴士票务门户:Quero Passagem
2020/11/21 全球购物
钳工实习自我鉴定
2013/09/19 职场文书
英文简历中的自荐信范文
2013/12/14 职场文书
市级绿色学校申报材料
2014/08/25 职场文书
房屋转让协议书
2014/10/18 职场文书
2015年事业单位办公室文员工作总结
2015/04/24 职场文书
2015年审计人员工作总结
2015/05/26 职场文书
企业催款函范本
2015/06/24 职场文书
周一给客户的问候语
2015/11/10 职场文书
社会心理学学习心得体会
2016/01/22 职场文书
一些让Python代码简洁的实用技巧总结
2021/08/23 Python
flex布局中使用flex-wrap实现换行的项目实践
2022/06/21 HTML / CSS