<!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. Linux | 文件编辑命令

    cat cat 命令是是一次性显示文件的所有内容 cat 是 concatenate 的缩写,表示:连接/串联 cat 文件名 可以看到,cat 命令是一次性显示出所有的文件内容,这就导致了,有的文件 ...

  2. 史上最全的Nginx配置文档

    Nginx是一个异步框架的Web服务器,也可以用作反向代理,负载平衡器 和 HTTP缓存.该软件由Igor Sysoev 创建,并于2004年首次公开发布.同名公司成立于2011年,以提供支持.Ngi ...

  3. SECURECRT 连接锐捷交换机CONSOLE

    协议选择Serial,端口选择COM1.波特率设置为9600.RTS/CTS要把勾去掉(关闭流控功能)

  4. PYTHON matplotlib入门

    '''作为线性图的替代,可以通过向 plot() 函数添加格式字符串来显示离散值. 可以使用以下格式化字符. 字符 描述 '-' 实线样式 '--' 短横线样式 '-.' 点划线样式 ':' 虚线样式 ...

  5. JAVA程序系统测试感受

    JAVA课程才刚刚开始,就仿佛经历了一场劫难,让我们叫苦连天,苦不堪言.暑假学的一些皮毛java知识,到了真正需要写一个相对完整的软件系统,就如同废材一样,实在是用不上来.我看着小民哥布置的考试内容, ...

  6. react-router 基本使用

    # 1. 理解react-router react的一个插件库 专门用来实现一个SPA应用 基于react的项目基本都会用到此库 # 2. 几个重要问题## 1). SPA应用 单页Web应用(sin ...

  7. Requests方法 -- Token获取操作

    获取token和code流程如下:a.先登陆抓包查看post(提交表单操作)头中是否有token和code关键字b.已知步骤a中出现了token和code,不登录前刷新登陆页面,查看response中 ...

  8. 怎么实现系统调用wait和exit

    例程 #include <unistd.h> #include <stdlib.h> #include <stdio.h> #include <sys/wai ...

  9. Lesson 12 Life on a desert island

    Lesson 12 Life on a desert island desert island ['dezət 'ailənd] n. 荒岛 uninhabited island coral isla ...

  10. 标准化R包开发流程

    3个武器: devtools:各种开发小工具的合集,让开发变得简单,非常实用 roxygens:通过注释的方式,生成文档,远离LaTex的烦恼 testthat:单元测试,让R包稳定.健壮.减少升级的 ...