<!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. JMeter之BeanShell常用内置对象

    一.什么是Bean Shell BeanShell是一种完全符合Java语法规范的脚本语言,并且又拥有自己的一些语法和方法; BeanShell是一种松散类型的脚本语言(这点和JS类似); BeanS ...

  2. Charles使用笔记001

    一.抓电脑的请求 Proxy-->勾选Windows Proxy 二.Charles 拦截原理 三.Charles 拦截修改数据 选择一个链接-->右键-->勾选Breakpoint ...

  3. 12. Mysql基础入门

    课程大纲 • 数据库概述 • MySQL基本操作 • MySQL索引基础 • MySQL高级特性

  4. 【学习笔记】Github的使用

    在github上上传项目代码 在github官网上新建自己的仓库,需要写好标题和说明文件,然后复制自己的仓库地址 在要上传到的本地project中右键, Git bash here,接着输入 git ...

  5. 微信小程序云开发-云存储-上传单张照片到云存储并显示到页面上

    一.wxml文件 页面上写上传图片的按钮,按钮绑定chooseImg. <button bindtap="chooseImg" type="primary" ...

  6. PAT甲级：1036 Boys vs Girls (25分)

    PAT甲级:1036 Boys vs Girls (25分) 题干 This time you are asked to tell the difference between the lowest ...

  7. debian9 独显安装后进入不了桌面解决方法

    # apt-get purge nvidia. # /etc/init.d/sddm stop (sddm for kde) # aptitude --without-recommends insta ...

  8. shell编程-ssh免交互批量分发公钥脚本

    脚本基本原理 1.控制端免交互创建秘钥和公钥: 1 ssh-keygen -t rsa -f /root/.ssh/id_rsa -N "" 2.免交互发送公钥 1 sshpass ...

  9. 【阿菜读论文】ContractFuzzer：fuzzing方法挖掘智能合约漏洞

    论文简介 论文标题:ContractFuzzer: Fuzzing Smart Contracts for Vulnerability Detection 论文链接:ContractFuzzer: F ...

  10. ASP.NET中Textbox后的必填验证控件RequiredFieldValidator的使用方法。

    制作效果如下: 实现方法: 1. 拖动RequiredFieldValidator控件到相应的textbox后位置,点击属性面板,输入ErroMessage相应信息,更改ForeColor为红色 设置 ...