如何实现密码输入框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 ...
随机推荐
- python练习---小脚本
一.爬子域名 #!/usr/bin/python # -*- coding: utf-8 -*- import requests import re import sys def get(domain ...
- perf + 火焰图用法 小结
要对新服务做性能测试,分析代码热点,初识perf,做下总结 perf + 火焰图用法 perf简介 Perf (Performance Event), Linux 系统原生提供的性能分析工具, 会返回 ...
- PHP自定义生成二维码跳转地址
比较简单的一款PHP自定义生成二维码跳转地址,手机端微信扫码,自动跳转到定义好的链接.支持自定义生成二维码尺寸.间距等. 鼠标悬浮显示二维码弹出层,离开后消失.js实现,代码如下: $(fu ...
- 《Cocos2d-x游戏开发实战精解》学习笔记3--在Cocos2d-x中播放声音
<Cocos2d-x游戏开发实战精解>学习笔记1--在Cocos2d中显示图像 <Cocos2d-x游戏开发实战精解>学习笔记2--在Cocos2d-x中显示一行文字 之前的内 ...
- [python] Queue.Queue vs. collections.deque
https://stackoverflow.com/questions/717148/queue-queue-vs-collections-deque/717199#717199 Queue,Queu ...
- 利用Tensorflow进行自然语言处理（NLP）系列之一Word2Vec
同步笔者CSDN博客(https://blog.csdn.net/qq_37608890/article/details/81513882). 一.概述 本文将要讨论NLP的一个重要话题:Word2V ...
- 第四次ScrumMeeting博客
第四次ScrumMeeting博客 本次会议于10月28日(六)22时整在3公寓725房间召开,持续15分钟. 与会人员:刘畅.辛德泰.窦鑫泽.张安澜.赵奕. 1. 每个人的工作(有Issue的内容和 ...
- Oracle 11g用exp无法导出空表的处理方法
Oracle 11G在用EXPORT导出时,空表不能导出. 11G中有个新特性,当表无数据时,不分配segment,以节省空间 解决方法: 1.insert一行,再rollback就产生segment ...
- Java 学习笔记 ------第六章 继承与多态
本章学习目标: 了解继承的目的 了解继承与多态的关系 知道如何重新定义方法 认识java.lang.object 简介垃圾回收机制 一.继承 继承是java面向对象编程技术的一块基石,因为它允许创建分 ...
- VK Cup 2015 - Qualification Round 1 D. Closest Equals 离线+线段树
题目链接: http://codeforces.com/problemset/problem/522/D D. Closest Equals time limit per test3 secondsm ...