如何实现密码输入框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 ...
随机推荐
- CF 1025 D. Recovering BST
D. Recovering BST http://codeforces.com/contest/1025/problem/D 题意: 给出一个连续上升的序列a,两个点之间有边满足gcd(ai ,aj) ...
- MySQL主从失败报错误： Got fatal error 1236
一.问题原因及报错误信息 由于MySQL主库意外重启,导致从库无法同步报错如下: 登录从库查看主从同步的错误信息 [root@--- mysql]# vim mysqld-error.log -- : ...
- Qt-Qt5最新增加程序图标方式
亲爱的小伙伴吗,还记得原始的Qt4是怎么给运行程序添加图标的么,是不是先准备一个ICON文件,问了在家里建立一个rc文件,在文件里面加上 IDI_ICON1 ICON ...
- MySQL数据库--连接
MySQL数据库的概念: MySQL数据库,包括客户端和服务端.客户端就是操作数据库的终端(命令行.navicat),服务端就是安装有MySQL软件的主机(本机或者服务器),MySQL数据库的端口一般 ...
- 4星|《亿万》：FBI大战华尔街对冲基金大鳄
亿万:围剿华尔街大白鲨 全书尝试还原2008-2013年前后FBI指控赛克资本老板科恩通过内幕交易盈利的案件细节. 作者花了数年时间,采访了200多位当事人,阅读了海量的相关资料.书中交代了科恩的发家 ...
- C语言零碎知识点
1. int整形在64位和32位计算机中都占4个字节. 指针在64位占8个字节,32位占4个字节. 2. 数组下标从0开始,a[0]开始,链表下标从1开始,a[1]开始. 3. 条件运算符(con ...
- Github二次学习
作者声明:本博客中所写的文章,都是博主自学过程的笔记,参考了很多的学习资料,学习资料和笔记会注明出处,所有的内容都以交流学习为主.有不正确的地方,欢迎批评指正. 本节课视频内容:https://www ...
- 软件工程第七周psp
1.PSP表格 类别 任务 开始时间 结束时间 中断时间 delta时间 立会 汇报昨天的成绩,分配任务,部署计划 10月27日18:00 10月27日18:36 0 36分钟 准备工作 查阅有关资料 ...
- uc浏览器的用户体验
用户界面: 我认为,uc浏览器的用户界面还是很招人喜欢的,可以很容易让用户找到自己想看的网页.简单快捷. 记住用户的选择: uc在每次用户访问完网站之后都会记住用户访问的高频网站,以便下次用户可以更好 ...
- Linux 下web开发环境搭建-jdk环境搭建
Centos 7 附:windows 下jdk环境变量 CLASSPATH .;%JAVA_HOME%\lib;%JAVA_HOME%\lib\dt.jar;%JAVA_HOME%\lib\tools ...