如何实现密码输入框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 ...
随机推荐
- 4540: [Hnoi2016]序列
4540: [Hnoi2016]序列 https://www.lydsy.com/JudgeOnline/problem.php?id=4540 分析: 莫队+RMQ+单调栈. 考虑加入一个点后,区间 ...
- AngularJS中Directive指令系列
近段时间在研究Angular中的directive用法,打算写个系列.以官方文档为主.并参考诸多教程.加上自己的思考. 基本概念及用法 scope属性的使用. &, <, =, @ 符 ...
- HTTP请求方式：GET和POST的比较
GET和POST是HTTP的两个常用方法 什么是HTTP? 超文本传输协议(HyperText Transfer Prptocol-HTTP)是一个设计来使客户端和服务器顺利进行通讯的协议. HTTP ...
- 解决WCF传输的数据量过大问题
今天写了个WCF接口,然后自测通过,和别人联调时报 远程服务器返回错误: (413) Request Entity Too Large 错误!记得以前写的时候也出现过这个错误,大致解决办 ...
- 三、Django之请求与响应-Part 1
一.新建项目 进入你指定的项目保存目录,然后运行下面的命令: $ django-admin startproject mysite 这将在目录下生成一个mysite目录,也就是你的这个Django项目 ...
- Siki_Unity_3-16_3D数学基础
Unity 3-16 3D数学基础 任务0-1:课程介绍 课程大纲: 1. 3D数学介绍 2. Unity中的几种坐标系: 全局坐标系.屏幕坐标系等 坐标系间的坐标转换:比如屏幕坐标转换到世界坐标 3 ...
- Catch That Cow：BFS：加标记数组：不加标记数组
Catch That Cow Problem Description Farmer John has been informed of the location of a fugitive cow a ...
- Node2vec 代码分析
Node2vec 代码从Github上clone到本地,主要是main.py和node2vec.py两个文件. 下面把我的读代码注释放到上面来, import numpy as np import n ...
- leetcode个人题解——#43 Multiply Strings
思路:高精度乘法就可以了. 有两个错误以前没在意,1.成员属性定义时候不能进行初始化, vector<); 这样隐性调用了函数进行初始化的形式特别要注意,也是错误的: 2.容器类只有分配了空间时 ...
- VR产业链全景图