如何实现密码输入框focus状态弹出提示信息
一、密码输入提示框样式实现
效果图如下：
源码如下：
<html>
<style type="text/css">
*{
padding: 0;
margin:0;
}
.pwd_content{
position:relative;
top:100px;
}
.pwd_tips{
width: 140px;
position: absolute;
left: 230px;
top: -20px;
border: 1px solid #c2c2c2;
padding: 5px;
font-size: 12px;
color:#666;
font-weight: normal;
display:none;
}
.arrow1, .arrow2{
position: absolute;
left: -13px;
top: 25px;
border-top: 6px transparent dashed;
border-left: 6px transparent dashed;
border-bottom: 6px transparent dashed;
border-right: 6px solid #c2c2c2;
} .arrow2{
left: -12px;/*这里很重要,相当于比原来的三角右移了一个像素*/
border-right: 6px white solid;/*用白色的三角覆盖掉灰色的三角*/
} .pwd_tips .pwd_tip1, .pwd_tips .pwd_tip2{
padding-left:16px;
} .pwd_tips .point{
position: absolute;
left: 4px;
margin-top: 4px;
font-size: 40px;
line-height: 12px;
}
</style>
<body>
<div class="pwd_content">
<label for="passwd">密码：</label>
<input type="password" name="passwd" id="passwd">
<div class="pwd_tips" id="pwd_tips">
<span class="arrow1"></span>
<span class="arrow2"></span>
<p class="pwd_tip1"><span class="point">· </span>密码长度至少8个字符</p>
<p class="pwd_tip2"><span class="point">· </span>包含数字，大小写字母和特殊字符其中的三种</p>
</div>
</div>
</body>
<script type="text/javascript">
function passwd_init(){
document.getElementById("passwd").addEventListener("focus", function(){
document.getElementById("pwd_tips").style.display = "block";
})
document.getElementById("passwd").addEventListener("blur", function(){
document.getElementById("pwd_tips").style.display = "none";
})
}
passwd_init();
</script>
</html>
空心箭头实现参考：用css制作空心箭头(上下左右各个方向均有)
注：关于文字换行对齐的实现的另一种方法：效果图：
代码实现：
<html>
<head>
<style>
.point{
display:inline-block;
width：5%;
margin-top: -6px;
}
.cont{
display:inline-block;
width:95%;
vertical-align:top;
}
</style>
</head>
<body>
<div style="width:300px;border:1px solid #ff5500;">
<p><span class="point">.</span><span class="cont">密码长度至少8个字符</span></p>
<p><span class="point">.</span><span class="cont">包含数字，大小写字母和特殊字符其中的三种</span></p>
</div>
</body>
</html>
关键点：设置.cont的样式为inline-block，行内块级是使文字与点同一行且文字作为一个整体靠左对齐的关键。若按默认inline则第二行的文字会跟点对齐。
二、一般密码校验及报错实现
功能点：
1.密码格式要求：
2.用户点击提交时进行校验，若首次输入的密码格式不对，显示错误提示同时明文显示密码即可，不再进行两次密码的一致性校验。
3.若第一遍输入的密码格式正确，再进行判断两次输入的密码是否一致，不一致则报错同时明文显示密码。
样式效果图：
正在输入密码时：
正在输入确认密码时：
密码格式不对时，单击submit的响应样式：
两次密码不一样时，单击submit的响应样式：
源码实现：
<html>
<style type="text/css">
*{
padding: 0;
margin:0;
}
label{
display:inline-block;
}
.content{
position:relative;
top:100px;
}
.pwd_content{
padding-top:20px;
padding-bottom: 20px;
}
.pwd_tips{
width: 140px;
position: absolute;
left: 260px;
top: 22px;
border: 1px solid #c2c2c2;
padding: 5px;
font-size: 12px;
color:#666;
font-weight: normal;
display:none;
}
.arrow1, .arrow2{
position: absolute;
left: -13px;
top: 25px;
border-top: 6px transparent dashed;
border-left: 6px transparent dashed;
border-bottom: 6px transparent dashed;
border-right: 6px solid #c2c2c2;
} .arrow2{
left: -12px;/*这里很重要,相当于比原来的三角右移了一个像素*/
border-right: 6px white solid;/*用白色的三角覆盖掉灰色的三角*/
} .pwd_tips .pwd_tip1, .pwd_tips .pwd_tip2{
padding-left:16px;
} .pwd_tips .point{
position: absolute;
left: 4px;
margin-top: 4px;
font-size: 40px;
line-height: 12px;
} label.error {
color: #e81123;
display: inline-block;
margin-left: 10px;
} </style>
<body>
<div class="content">
<div>
<label style="width:80px;" for="updateType0">用户名</label>
<input type="text" value="Administrator" readonly/>
</div>
<div class="pwd_content">
<label style="width:80px;" for="passwd">密码：</label>
<input type="password" name="passwd" id="passwd">
<label for="passwd" class="error" style="display:none">密码不符合规范</label>
<div class="pwd_tips" id="pwd_tips">
<span class="arrow1"></span>
<span class="arrow2"></span>
<p class="pwd_tip1"><span class="point">· </span>密码长度至少8个字符</p>
<p class="pwd_tip2"><span class="point">· </span>包含数字，大小写字母和特殊字符其中的三种</p>
</div>
</div>
<div>
<label style="width:80px;" for="passwd_confirm">确认密码：</label>
<input type="password" name="passwd_confirm" id="passwd_confirm">
<label for="passwd_confirm" class="error" style="display:none">两次密码不一致</label>
</div>
<button style="margin-top:20px;" id="submit">submit</button>
</div>
</body>
<script src="js/libs/jquery.min.js"></script>
<script type="text/javascript">
String.prototype.isValidPW = function(){
// First, check for at least 8 characters
if (this.length < 8) return false; // next, check that we have at least 3 matches
var re = [/\d/, /[A-Z]/, /[a-z]/, /[!@#$%&\/=?_.,:;-]/], m = 0;
for (var r = 0; r < re.length; r++){
if ((this.match(re[r]) || []).length > 0) m++;
}
return m >= 3;
}; function passwd_init(){
document.getElementById("passwd").addEventListener("focus", function(){
document.getElementById("pwd_tips").style.display = "block";
})
document.getElementById("passwd").addEventListener("blur", function(){
document.getElementById("pwd_tips").style.display = "none";
})
}
passwd_init();
function passwd_check() {
if(!$("#passwd").val().isValidPW()){
$("label[for='passwd'].error").show();
$("#passwd").attr('type',"text");
document.getElementById("passwd").addEventListener("focus", function(){
$("label[for='passwd'].error").hide();
$("#passwd").attr('type',"password");
})
return false;
}
if($("#passwd").val().trim() != $("#passwd_confirm").val().trim()) {
$("label[for='passwd_confirm'].error").show();
$("#passwd").attr('type',"text");
$("#passwd_confirm").attr('type',"text");
document.getElementById("passwd_confirm").addEventListener("focus", function(){
$("label[for='passwd_confirm'].error").hide();
$("#passwd").attr('type',"password");
$("#passwd_confirm").attr('type',"password");
})
return false;
}
return true;
}
document.getElementById("submit").addEventListener("click", passwd_check); </script>
</html>
如何实现密码输入框focus状态弹出提示信息的更多相关文章
- jQuery弹出提示信息简洁版（自动消失）
之前看了有一些现成的blockUI.Boxy.tipswindow等的jQuery弹出层插件,可是我的要求并不高,只需要在保存后弹出提示信息即可,至于复杂点的弹出层-可以编辑的,我是直接用bootst ...
- jQuery弹出提示信息自动消失简洁版
// 在bootstrap中可以,可以使用如下方式实现弹出提示信息自动消失,如果没有使用bootstrap框架,可以自定义样式 //tip是提示信息,type:'success'是成功信息,'dang ...
- 如何在使用了updatepanel后弹出提示信息
转载:http://www.cnblogs.com/brusehht/archive/2009/03/19/1416802.html 常情况下,我们在使用ajax利用updatepanel实现页面局部 ...
- Jquery地图热点效果-鼠标经过弹出提示信息
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/ ...
- asp.net 按钮执行前后台方法——前台弹出提示信息，确认后继续执行后台方法，取消则不执行后台方法
我们做一个测试的web页面,只需要一个button+一个label就ok啦,通过button按钮的后台事件修改label的text属性值来测试是否执行了后台事件里的代码 前台 写一个js方法: < ...
- SQL错误代码弹出提示信息类
截获SQL错误代码弹出提示信息类 Code:public class DBErrorCode{ /// <summary> /// 根据错误代码弹出错误提示 /// &l ...
- ASP.Net UpdatePanel控件 局部刷新 && 弹出提示信息
参考博客: https://blog.csdn.net/qq_35019337/article/details/69972552 https://blog.csdn.net/huangyezi/art ...
- thinkPHP5.0使用form表单提交数据和删除文章，不用TP的提示页面，使用弹出提示信息
form表单提交数据和删除文章时,TP的默认信息提示页面的看起来不是很好看,想要实现弹窗提示怎么做呢? 前端:可以使用前端的一个知识--iframe,iframe元素会创建包含另外一个文档的内联框架: ...
- Bootstrap历练实例：弹出提示信息的样式按钮
<!DOCTYPE html><html><head><meta http-equiv="Content-Type" content=&q ...
随机推荐
- 图论-求有向图的强连通分量（Kosaraju算法）
求有向图的强连通分量 Kosaraju算法可以求出有向图中的强连通分量个数,并且对分属于不同强连通分量的点进行标记. (1) 第一次对图G进行DFS遍历,并在遍历过程中,记录每一个点的退出顺序 ...
- RegExp，实现匹配合法邮箱（英文邮箱）的正则表达式
邮箱列表:@qq.com.@vip.qq.com.@foxmail.com,数字邮箱暂时不考虑 以下邮箱列表用于测试: lihaha@qq.com lihaha@vip.qq.com lihaha@f ...
- UTC时间转为正常日期
SimpleDateFormat sf = new SimpleDateFormat("yyyy-MM-dd'T'HH:mm:ss'Z'", Locale.US);SimpleDa ...
- openstack-r版(rocky)搭建基于centos7.4 的openstack swift对象存储服务 四
openstack-r版(rocky)搭建基于centos7.4 的openstack swift对象存储服务 一 openstack-r版(rocky)搭建基于centos7.4 的openstac ...
- 福利，一张图看懂IT售前工程师修炼之道
职场中的新人如何自我定位? 如何深刻理解IT售前这个职位? 如何从IT售前菜鸟成长为IT售前专家? 推荐这本书<IT售前工程师修炼之道> 本书精华内容 售前的重要性 售前要有逻辑能力 售前 ...
- 微软职位内部推荐-Principal Group Program Manager
微软近期Open的职位: Standard job title: Principal Group Program Manager Discipline: Program Management Prod ...
- “Hello World！”团队第六周的第五次会议
今天是我们团队“Hello World!”团队第六周召开的第五次会议.博客内容: 一.会议时间 二.会议地点 三.会议成员 四.会议内容 五.todo list 六.会议照片 七.燃尽图 八.代码 一 ...
- 《Linux内核与分析》第八周
by 20135130王川东 一.进程切换关键代码switch-to分析 1.进程调度与进程调度时机分析 1)不同类型的进程有不同的调度要求 分类:I/0-bound:频繁的进行I/o 通常会 ...
- UI分析之石家庄铁道大学官网
点击进入石家庄铁道大学的官方网站,首先映入眼帘的是“石家庄铁道大学”七个大字,配以蓝色背景和学校的俯瞰图,给人一种严谨又不失清新的感觉. 学校的网站首页界面主要有九个界面,分别是网站首页,学校概况,组 ...
- s2sh乱码一个小处理(新手按流程走)
解决乱码几小点: 1.配置过滤器,可以选择自己写,既然你用的SSH框架就更简单了,直接用Spring的过滤器,web.xml里配置一下即可. 2.Jsp页面设置编码,所有地方都要相同,我习惯用GBK ...