<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>邮箱密码验证</title>
        <style media="screen">
        *{
            margin: 0px;
            padding: 0px;
        }
        #wrap {
            width: 255px;
            height: 17px;
            display: none;
            position: absolute;
            top: 60px;
            left: 180px;
        }
        #wrap>p {
            width: 60px;
            height: 15px;
            line-height: 15px;
            text-align: center;
            display: inline-block;
            font-size: 0.8em;
            }
            form {
                margin: 20px;
            }
            span {
                font-size: 0.8em;
            }

　　　　#warning {
　　　　　　position: absolute;
　　　　　　top: 62px;
　　　　　　left: 50px;
　　　　}

　　　　#falseAlarm {
　　　　　　position: absolute;
　　　　　　top: 62px;
　　　　　　left: 50px;
　　　　　　display:none;
　　　　　　color:red;
　　　　}

        </style>

    </head>
    <body>
        <form class="" action="index.html" method="post">
            <span style="color:red">*</span><span>密码</span>
<input id="passWord" style="width: 300px;height:30px;border:1px solid lightgrey;"type="password" name="name" value="">
        </form>
        <span id="warning">6~16个字符，区分大小写</span>
        <span id="falseAlarm">密码长度应为6~16个字符</span>
        <div id="wrap">
                <p id="weak">弱</p>
                <p id="medium">中等</p>
                <p id="strong">强</p>
        </div>
    </body>
    <script type="text/javascript">
/*
            定义密码的规则
            1、密码长度位6～16位有效字符
            2、如果密码是纯数字、纯字母大写或者小写，则密码强大为弱
            3、密码中包含数字和字母的组合，则密码强度为中等
            4、密码中包含字母、大小写字母。下划线的组合密码强度为强
        */
        var passWord = document.getElementById("passWord");
        var wrap = document.getElementById('wrap');
        var weak = document.getElementById('weak');
        var medium = document.getElementById('medium');
        var strong = document.getElementById('strong');
        var warning = document.getElementById('warning');
        var falseAlarm = document.getElementById('falseAlarm');
        //添加键盘监听事件
        function addKeyEvent(event){
            event = event | window.event;
            var passcord = passWord.value;
            //密码强度为弱正则表达式
            var low = /(^\d{6,16}$)|(^[a-z]{6,16}$)|(^[A-Z]{6,16}$)|(^_{6,16}$)/g;
               //密码强度为中等正则表达式
            var middle = /(^[a-zA-Z]{6,16}$)|(^[a-z\d]{6,16}$)|(^[A-Z\d]{6,16}$)|(^[A-Z_]{6,16}$)|(^[_\d]{6,16}$)|(^[a-z_]{6,16}$)|(^[A-Z\d]{6,16}$)/g;
               //密码强度为强正则表达式
            var high = /(^[a-zA-Z\d]{6,16}$)|(^[a-zA-Z_]{6,16}$)|(^[a-z\d_]{6,16}$)(^[A-Z\d_]{6,16}$)|(^[a-zA-Z\d_]{6,16}$)/g;
            if (low.test(passcord)) {  //low.test(passcord) 如果满足low正则表达式，则返回true
                 wrap.style.display = "block";
                weak.style.color = "white";
                medium.style.color = "grey";
                strong.style.color = "grey";
                weak.style.background = "rgb(240,146,148)";
                medium.style.background = "rgb(228,228,228)";
                strong.style.background = "rgb(228,228,228)";
            } else if (middle.test(passcord)) {     //如果满足middle正则表达式，则返回true
                wrap.style.display = "block";   
                weak.style.color = "rgb(243,218,80)";
                medium.style.color = "white";
                strong.style.color = "grey";
               weak.style.background = "rgb(243,218,80)";
                medium.style.background = "rgb(243,218,80)";
                strong.style.background = "rgb(228,228,228)";
            } else if(high.test(passcord)){    //如果满足high正则表达式，则返回true
                wrap.style.display = "block";    
                weak.style.color = "rgb(76,173,79)";
                medium.style.color = "rgb(76,173,79)";
                strong.style.color = "white";
                weak.style.background = "rgb(76,173,79)";
                medium.style.background = "rgb(76,173,79)";
                strong.style.background = "rgb(76,173,79)";
            } else {
                wrap.style.display = "none"; //如果不满足正则方程则不会显示密码强度
            }
　　　　//假如输入密码位数超过16位，则会显示密码长度应为6~16个字符
            if (passcord.length >= 16) {
                warning.style.display = "none";
                falseAlarm.style.display = "block";
            } else {
　　　　//假如输入密码位数没超过16位，则会显示：6~16个字符，区分大小写
                warning.style.display = "block";
                falseAlarm.style.display = "none";
            }
        }
        passWord.addEventListener('keyup',addKeyEvent,false);
    </script>
</html>
效果如图所示：

javascript,html,正则表达式，邮箱密码验证的更多相关文章

  1. 如何使用JavaScript和正则表达式进行数据验证

    利用客户端JavaScript的优势,JavaScript中的正则表达式可以简化数据验证的工作,下面与大家分享下如何使用JavaScript和正则表达式进行数据验证,感兴趣的朋友可以参考下哈 数据验证 ...

  2. 邮箱&&密码验证-原理

    原理版: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF- ...

  3. java密码验证正则表达式校验

    ,正则表达式就是记录文本规则的代码.php密码验证正则表达式(8位长度限制)<?php //密码验证 $password = "zongzi_Abc_oo13a2"; $n ...

  4. 第一百五十节，封装库--JavaScript，表单验证--密码验证

    封装库--JavaScript,表单验证--密码验证 效果图 html <div id="reg"> <h2 class="tuo">& ...

  5. JavaScript 关于金额、数字验证的正则表达式

    JavaScript 关于金额.数字验证的正则表达式 function ismoney(money) { var reg = /(^[1-9]([0-9]+)?(\.[0-9]{1,2})?$)|(^ ...

  6. js 常用正则表达式表单验证代码

    正则表达式使用详解 简介 简单的说,正则表达式是一种可以用于模式匹配和替换的强有力的工具.其作用如下:测试字符串的某个模式.例如,可以对一个输入字符串进行测试,看在该字符串是否存在一个电话号码模式或一 ...

  7. 深入浅出的javascript的正则表达式学习教程

    深入浅出的javascript的正则表达式学习教程 阅读目录 了解正则表达式的方法 了解正则中的普通字符 了解正则中的方括号[]的含义 理解javascript中的元字符 RegExp特殊字符中的需要 ...

  8. 深入浅出Javascript的正则表达式

    深入浅出的javascript的正则表达式学习教程 阅读目录 了解正则表达式的方法 了解正则中的普通字符 了解正则中的方括号[]的含义 理解javascript中的元字符 RegExp特殊字符中的需要 ...

  9. javascript类型系统——正则表达式RegExp类型

    × 目录 [1]对象 [2]实例属性 [3]静态属性[4]实例方法 前面的话 前面已经介绍过javascript中正则表达式的基础语法.javascript的RegExp类表示正则表达式,String ...

随机推荐

  1. STM32笔记三

    1.单片机有两种存储器,程序存储器用来存储编写的程序,数据存储器用来存储单片机工作时的临时数据.内部存储器分为工作寄存器区.位寻址区.数据缓存区和特殊功能寄存器区. 2.位:数据存储的最小单位.在计算 ...

  2. C语言：宏参数的字符串化和宏参数的连接

    在宏定义中,有时还会用到#和##两个符号,它们能够对宏参数进行操作. # 的用法 #用来将宏参数转换为字符串,也就是在宏参数的开头和末尾添加引号.例如有如下宏定义: #define STR(s) #s ...

  3. 前端开发入门到进阶第三集【js和jquery的执行时间与页面加载的关系】

    https://blog.csdn.net/u014179029/article/details/81603561 [原文链接]:https://www.cnblogs.com/eric-qin/p/ ...

  4. 线程Thread中的方法详解（二）

    1.start() start()方法的作用讲得直白点就是通知"线程规划器",此线程可以运行了,正在等待CPU调用线程对象得run()方法,产生一个异步执行的效果.通过start( ...

  5. SLF4J日志桥接的应用

    最近在给公司的测试部门开发一套自动化测试框架,为了是框架产生的测试报告更易于分析,我考虑将每一个用例与运行过程中产生的日志相关联,为了实现这样的效果,首先就需要统一项目的日志输出,那么具体怎么做呢? ...

  6. MP4命令行处理

    MP4Box可用于生成符合MPEG-DASH规范的内容,也就是ISO / IEC 23009-1在ISO公共可用标准中可用的内容. dash切片命令: mp4box -dash 5000 -frag ...

  7. ThinkPHP 5

    use think\Controller 1.$this->request->param();      内置request 安全对象, 不再使用 $_GET ,$_POST 2.path ...

  8. ThinkPHP 2.x 任意代码执行漏洞

    直接访问 http://192.168.49.2:8080/index.php?s=/index/index/name/$%7B@phpinfo()%7D

  9. 8.3考试总结(NOIP模拟19)[最长不下降子序列·完全背包问题·最近公共祖先]

    一定要保护自己的梦想,即使牺牲一切. 前言 把人给考没了... 看出来 T1 是一个周期性的东西了,先是打了一个暴力,想着打完 T2 T3 暴力就回来打.. 然后,就看着 T2 上头了,后来发现是看错 ...

  10. [CTF] CTF入门指南

    CTF入门指南 何为CTF ? CTF(Capture The Flag)夺旗比赛,在网络安全领域中指的是网络安全技术人员之间进行技术竞技的一种比赛形式.CTF起源于1996年DEFCON全球黑客大会 ...