如何实现密码输入框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 ...

随机推荐

【CF813D】Two Melodies
[CF813D]Two Melodies 题面洛谷题解 $dp$: 设$f[i][j]$表示第一个集合以$i$结尾.第二个集合以$j$结尾的合法长度之和最大是多少明显有$f[i][j]=f[j] ...
Spring学习(九)-----Spring bean配置继承
在 Spring,继承是用为支持bean设置一个 bean 来分享共同的值,属性或配置. 一个子 bean 或继承的bean可以继承其父 bean 的配置,属性和一些属性.另外,子 Bean 允许覆盖 ...
Linux中如何安装Apache服务器
Linux中如何安装Apache服务器由于学习的需要,所有手动安装了一下Apache源码包,安装过程中的问题千奇百怪,但是如果弄清楚了问题出在哪里,那么也不是太难.如果有学习者出现安装中的问题,可仔 ...
Yogurt factory
Description The cows have purchased a yogurt factory that makes world-famous Yucky Yogurt. Over the ...
《Linux内核分析》学习总结与学习心得
一.目录列表第一周:计算机是如何工作的? http://www.cnblogs.com/dvew/p/5224866.html 第二周:操作系统是如何工作的? http://www.cnblogs. ...
Android：有关下拉菜单导航的学习（供自己参考）
Android:有关==下拉菜单导航==的学习因为先前的学习都没想着记录自己的学习历程,所以该博客才那么迟才开始写. 内容: ==下拉菜单导航== 学习网站:android Spinner控件详解 ...
随机生成四则运算式2-NEW+PSP项目计划（补充没有真分数的情况）
PS:这是昨天编写的随机生成四则运算式2的代码:http://www.cnblogs.com/wsqJohn/p/5264448.html 做了一些改进. 补:在上一次的运行中并没有加入真分数参与的运 ...
软件工程课堂练习——找出1-n中1出现的个数
题目:给定一个十进制的正整数,写下从1开始,到N的所有整数,然后数一下其中出现“1”的个数. 要求:写一个函数 f(N) ,返回1 到 N 之间出现的 “1”的个数.例如 f(12) = 5. 在3 ...
HDU 5233 Gunner II 离散化
题目链接: hdu:http://acm.hdu.edu.cn/showproblem.php?pid=5233 bc(中文):http://bestcoder.hdu.edu.cn/contests ...
asp.net登录状态验证
文章:ASP.NET 登录验证文章:ASP.NET MVC下判断用户登录和授权状态方法文章:.net学习笔记---HttpHandle与HttpModule 第一篇文章,介绍了 1)早期的Base ...

如何实现密码输入框focus状态弹出提示信息

如何实现密码输入框focus状态弹出提示信息的更多相关文章

随机推荐

热门专题