<!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. 「AGC035C」 Skolem XOR Tree

    「AGC035C」 Skolem XOR Tree 感觉有那么一点点上道了? 首先对于一个 \(n\),若 \(n\equiv 3 \pmod 4\),我们很快能够构造出一个合法解如 \(n,n-1, ...

  2. 学前端的第一门语言HTML

    学前端最终要做的就是制作各种各样的网页,html就相当于网页的骨架,所以我们学习前端的第一步就是先学html,接下来学习什么是html. 什么是HTML? HTML指的是超文本标记语言(Hyper T ...

  3. 动态 WebApi 引擎使用教程（3行代码完成动态 WebApi 构建）

    目录 什么是 WebApiEngine? 开源地址 使用方法 使用 [ApiBind] 标签让任何方法变成 WebApi 对 API 进行分类 自定义 API 名称 复制特性 为整个类配置 WebAp ...

  4. java跨平台性说明

    一.举例说明 我们知道,只要是用标准C开发的程序,使用不同的编译器编译后的可执行文件是可以在对应平台运行的,比如windows可以使用VC编译,那编译后的exe文件就可以在windows下运行:liu ...

  5. js之 foreach, map, every, some

    js中array有四个方法 foreach, map, every, some,其使用各有倾向. 关注点一:foreach 和 map 无法跳出循环,每个元素均执行 foreach 和 map 无法跳 ...

  6. C++ Socket编程（基础）

    一.基本简介 在计算机通信领域,socket 被翻译为"套接字",它是计算机之间进行通信的一种约定或一种方式. 通过 socket 这种约定,一台计算机可以接收其他计算机的数据,也 ...

  7. jvm源码解读--16 锁_开头

    现在不太清楚, public static void main(String[] args) { Object object=new Object(); System.out.println(&quo ...

  8. 【Web动画】科技感十足的暗黑字符雨动画

    本文将使用纯 CSS,带大家一步一步实现一个这样的科幻字符跳动背景动画.类似于这样的字符雨动画: 或者是类似于这样的: 运用在一些类似科技主题的背景之上,非常的添彩. 文字的竖排 首先第一步,就是需要 ...

  9. HTTP_CLIENT_IP、HTTP_X_FORWARDED_FOR、REMOTE_ADDR

    REMOTE_ADDR 是你的客户端跟你的服务器"握手"时候的IP.如果使用了"匿名代理",REMOTE_ADDR将显示代理服务器的IP. HTTP_CLIEN ...

  10. Jenkins-CI 远程代码执行漏洞（CVE-2017-1000353）

    影响范围 所有Jenkins主版本均受到影响(包括<=2.56版本) 所有Jenkins LTS 均受到影响( 包括<=2.46.1版本) poc下载 https://github.com ...