妙用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 全角转半角部分
Oct 28 Javascript
检测input每次的输入是否合法遇到汉字输入就有问题
May 23 Javascript
深入理解javascript中defer的作用
Dec 11 Javascript
js日期对象兼容性的处理方法
Jan 28 Javascript
基于JavaScript代码实现随机漂浮图片广告
Jan 05 Javascript
Angular实现表单验证功能
Nov 13 Javascript
Javascript中的作用域及块级作用域
Dec 08 Javascript
深入理解node.js http模块
Jan 24 Javascript
JS原生带缩略图的图片切换效果
Oct 10 Javascript
vue给对象动态添加属性和值的实例
Sep 09 Javascript
javascript二维数组和对象的深拷贝与浅拷贝实例分析
Oct 26 Javascript
vue-router路由懒加载及实现的3种方式
Feb 28 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的list()的一步操作给一组变量进行赋值的使用
2011/05/18 PHP
php header功能的使用
2013/10/28 PHP
使用js获取QueryString的方法小结
2010/02/28 Javascript
JavaScript 存在陷阱 删除某一区域所有节点
2010/05/10 Javascript
js控制的回到页面顶端goTop的代码实现
2013/03/20 Javascript
用jquery存取照片的具体实现方法
2013/06/30 Javascript
深入理解JQuery keyUp和keyDown的区别
2013/12/12 Javascript
javascript调试之DOM断点调试法使用技巧分享
2014/04/15 Javascript
JS实现在线统计一个页面内鼠标点击次数的方法
2015/02/28 Javascript
JavaScript实现的多个图片广告交替显示效果代码
2015/09/04 Javascript
全面解析Bootstrap排版使用方法(文字样式)
2015/11/30 Javascript
jquery获取复选框checkbox的值实现方法
2016/05/30 Javascript
JavaScript中的对象继承关系
2016/08/01 Javascript
原生js实现倒计时功能(多种格式调用)
2017/01/12 Javascript
PHP 实现一种多文件上传的方法
2017/09/20 Javascript
安装vue-cli报错 -4058 的解决方法
2017/10/19 Javascript
vue组件开发之用户无限添加自定义填写表单的方法
2018/08/28 Javascript
React 项目迁移 Webpack Babel7的实现
2018/09/12 Javascript
node实现socket链接与GPRS进行通信的方法
2019/05/20 Javascript
JavaScript实现单图片上传并预览功能
2019/09/30 Javascript
微信小程序实现吸顶效果
2020/01/08 Javascript
tracking.js实现前端人脸识别功能
2020/04/16 Javascript
[44:40]KG vs LGD 2019国际邀请赛小组赛 BO2 第一场 8.15
2019/08/16 DOTA
5分钟 Pipenv 上手指南
2018/12/20 Python
python实现宿舍管理系统
2019/11/22 Python
Python的对象传递与Copy函数使用详解
2019/12/26 Python
python图片验证码识别最新模块muggle_ocr的示例代码
2020/07/03 Python
使用Python实现NBA球员数据查询小程序功能
2020/11/09 Python
HTML5中input[type='date']自定义样式与日历校验功能的实现代码
2017/07/11 HTML / CSS
乐高官方旗舰店:LEGO积木玩具
2019/04/06 全球购物
学生个人的自我评价分享
2013/11/05 职场文书
三峡人家导游词
2015/01/31 职场文书
2015年小学教导处工作总结
2015/05/26 职场文书
国际贸易实训总结
2015/08/03 职场文书
go xorm框架的使用
2021/05/22 Golang
详解盒子端CSS动画性能提升
2021/05/24 HTML / CSS