帮助中心
获取牛币
联系我们
关于我们
版权声明
素材牛首页
微博登录
QQ登录
微信扫码登录
注册
登录
新浪微博
QQ登陆
微信登录
热门搜索:
小程序
支付
Java
后台模板
上传
商城模板
jQuery
手机
Thinkphp
微信
Vue.js
首 页
网页特效
整站源码
PHP实例
网站模版
工具箱
常用代码
论坛
游戏源码
资源分享
当前位置:
首页
»
精选常用代码
» jQuery INPUT输入框验证提示
jQuery INPUT输入框验证提示
浏览:570次
-
评论:0次
-
发布时间:2017-08-24
Html
Css
Js
$(function() { var c = new ValidateCompent("#test"); }); /** * 验证输入框 * @param {Object} input */ function ValidateCompent(input) { var _input = $(input).clone(true); _input.css("height", $(input).css("height")); _input.css("width", $(input).css("width")); var border = _input.css("border"); this.successIconClass = "icon-tick"; this.validate = false; this.faileIconClass = "icon-times"; var $validateRoot = $('
'); var $tooltip = $validateRoot.children(".validate-v1-tooltip"); var $input = _input; if ($input != undefined) { var maxWidth = $input.css("width"); var maxHeight = "15px"; $validateRoot.css("display", "inline"); $validateRoot.css("position", "relative"); // $validateRoot.css("width", maxWidth); $validateRoot.css("height", maxHeight); $tooltip.css("width", maxWidth); $tooltip.css("padding", "0px 5px"); $tooltip.css("position", "absolute"); $tooltip.css("top", -parseInt($(input).css("height")) + 25 + "px"); $tooltip.css("z-index", "999999"); $tooltip.css("background-color", "white"); $tooltip.css("border", "solid 1px rgb(188,188,188)"); $tooltip.css("left", parseInt(maxWidth) + 10 + "px"); $tooltip.hide(); var validateOption = $input.attr("data-vali-option"); if (validateOption != undefined) { validateOption = JSON.parse(validateOption); var that = this; var regvali = new Array(); $tooltip.hide(); if (validateOption.length == 0) { return; } for (var i = 0; i < validateOption.length; i++) { var message = validateOption[i].message; var pattern = validateOption[i].pattern; var reg = new RegExp(pattern); var messageView = new ValidateMessage(message, that.faileIconClass); regvali.push({ "reg": reg, "view": messageView }); $tooltip.append(messageView.dom); } $tooltip.css("height", (parseInt(maxHeight) + 15) * validateOption.length); $input.on("focus propertychange input", function(e) { $tooltip.show(); for (var i = 0; i < regvali.length; i++) { if (regvali[i].reg.test($input.val())) { regvali[i].view.setIconClass(that.successIconClass); regvali[i].view.dom.css("color", "green"); } else { regvali[i].view.setIconClass(that.faileIconClass); regvali[i].view.dom.css("color", "red"); } } }) $input.on("blur", function(e) { for (var i = 0; i < regvali.length; i++) { if (regvali[i].reg.test($input.val())) { regvali[i].view.setIconClass(that.successIconClass); $input.css("border", border == undefined ? "border 1px solid rgb(188,188,188)" : border); that.validate = true; } else { regvali[i].view.setIconClass(that.faileIconClass); $input.css("border", "1px solid red"); that.validate = false; break; } } $tooltip.hide(); }); $validateRoot.append($input); } else { return; } } this.dom = function() { return $validateRoot; } function ValidateMessage(message, iconFontClass) { var dom = $('
'); var $icon = dom.children(".vticon"); var $message = dom.children(".vmessage"); $message.css("line-height", "28px"); $message.css("padding", "5px 5px"); $message.css("padding-right", "10px"); $message.css("word-break", "break-all"); $message.css("word-wrap", "break-word"); $message.css("font-size", "14px"); $message.css("position", "relative"); $message.css("z-index", "999999"); this.setIconClass = function(iconClass) { $icon.removeClass(); $icon.addClass("vticon"); $icon.addClass(iconClass); } this.getIcon = function() { return $icon; } this.setMessageText = function(_message) { $message.html(_message); } this.getMessageText = function() { return $message; } this.setIconClass(iconFontClass); this.setMessageText(message); this.dom = dom; } $validateRoot.insertAfter($(input)); $(input).remove(); }
↑上面代码改变,会自动显示代码结果
jQuery调用版本:
1.8.3
<!doctype html><html><head><meta charset="utf-8"><title>jQuery INPUT输入框验证提示-www.sucainiu.com</title><script src="https://libs.baidu.com/jquery/1.8.3/jquery.min.js"></script><style>
</style></head><body>
<script>
</script>
</body></html>
立即下载
收藏
积分说明:注册即送10牛币,每日签到可获得5牛币,成为VIP会员可永久免牛币下载!
充值积分
充值会员
更多说明»
代码描述:用于验证TextAreaINPUT框
jQuery简单实现权限选择
JS获取时间、转换时间(笔记)
讨论这个常用代码(0)
回答他人问题或分享心得会奖励牛币
〒_〒 居然一个评论都没有……
文明上网,理性发言! 😉 阿里云幸运券,
戳我领取
发表评论
提交回复
我的积分余额:
0
已下载次数:
570
所需牛币:
5
开始下载
牛币获取:
签到、评论、充值
» 在线充值
(10牛币=1元)
成为VIP可永久免积分下载全部常用代码
» 查看详情
VIP
客服
签到
充值