如何实现密码输入框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 ...
随机推荐
- Yii 2.0 使用片段缓存
网站首页footer中的菜单标题是从数据库读取并显示处理的. 也就是 <footer>标题里面是foreach.这样每个人打开网站就查询遍历效率会很低. <footer class= ...
- 九、Django之ORM
一.ORM概述 用于实现面向对象编程语言里不同类型系统的数据之间的转换,换言之,就是用面向对象的方式去操作数据库的创建表以及增删改查等操作. 到目前为止,当我们的程序涉及到数据库相关操作时,一般操作流 ...
- arcpy示范教学（一）：基本操作
arcpy基本操作 打开目录,遍历目录,打开要素类,遍历要素,打开文件,写入属性值 import arcpy import codecs # 设置工作目录 arcpy.env.workspace = ...
- 关于nginx反向代理504 gateway time-out配置
问题描述: 使用nginx的默认配置用作后端处理服务的反向代理,针对处理时间超过1分钟的请求,返回504 gateway time-out,但后端服务还在执行中. 原因分析: nginx代理默认超时时 ...
- C#之Lambda不得不说的用法
由于我才开始接触代码的时候遇到循环问题都是用foreach和for,慢慢就成了习惯,不愿意用其他简便的方式,偶然发现lambda能代替循环而且简便了很多.当然我用lambda也不是简便,更多是不用不行 ...
- bootstrap form样式及数据提交
1.基本form布局 想要把form表单弄成两列的表格样式,奈何前端不太懂,记录下样式便于下次使用. form-group :增加盒子的下边界 form-control: 充满整个父元素,并且有换行作 ...
- Google TensorFlow for GPU安装、配置大坑
Google TensorFlow for GPU安装.配置大坑 从本周一开始(12.05),共4天半的时间,终于折腾好Google TensorFlow for GPU版本,其间跳坑无数,摔得遍体鳞 ...
- phpldapadmin具体设置
一.需求 1.属性隐藏 只显示用户名,部门(因为是单OU设计为了做区分),登录密码 2.属性顺序显示 部门>用户名>登录密码 3.使用UID可以登陆 用户可以使用账户(自己的名字)登 ...
- Python坑系列：可变对象与不可变对象
在之前的文章 http://www.cnblogs.com/bitpeng/p/4748148.html 中,大家看到了ret.append(path) 和ret.append(path[:])的巨大 ...
- Python 深浅复制
(一)浅复制 复制列表最简单的方式是使用内置类型的构造方法: >>> l1 = [1, [2, 3], (4, 5)] >>> l2 = list(l1) > ...