<!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. asp.net core 视图组件（转）

    介绍视图组件 视图组件是 ASP.NET Core MVC 中的新特性,与局部视图相似,但是它们更加的强大.视图组件不使用模型绑定,只取决于调用它时所提供的数据.视图组件有以下特点: 渲染一个块,而不 ...

  2. 对抗攻击(一) FGSM

    引言 在对抗样本综述(二)中,我们知道了几种著名的对抗攻击和对抗防御的方法.下面具体来看下几种对抗攻击是如何工作的.这篇文章介绍FGSM(Fast Gradient Sign Method). 预备知 ...

  3. VisualEffectGraph基础操作 --创建VEG项目步骤讲解

    一:建立VEG项目步骤 首先打开Unity Hub,  使用unity2020.1 新建项目(本技术博客,默认使用unity2020.1 版本演示),选择HDRP 高清渲染管线,确定项目目录与名称. ...

  4. VUE+ElementUI实现左侧为树形结构、右侧无层级结构的穿梭框

    工作中遇到一个需求,需要将一个数据选择做成穿梭框,但是要求穿梭框左侧为树形结构.右侧为无层级结构的数据展示,ElementUI自身无法在穿梭框中添加树形结构,网上搜到了大佬封装的插件但是对于右侧的无树 ...

  5. 【LeetCode】27.移除元素

    27.移除元素 知识点:数组:双指针:: 题目描述 给你一个数组 nums 和一个值 val,你需要 原地 移除所有数值等于 val 的元素,并返回移除后数组的新长度. 不要使用额外的数组空间,你必须 ...

  6. Scala学习——操作外部数据

    scala操作外部数据 一.scala读取文件及网络数据 package top.ruandb.scala.Course08 import scala.io.Source object FileApp ...

  7. 数组去重汇总—v客学院技术分享

    上周基础班结束了数组的学习内容,这几天有时间整理了下几种比较常用的数组去重的方法供大家查阅!!!!! 话不多说,直接贴代码吧~~~~~~~ 欢迎大家指正,共同学习,一同进步!!! (php开发,web ...

  8. 更改Nginx网站根目录以及导致的403 forbidden问题

    Nginx采用默认配置,只修改了root的网站根目录位置,再访问网站的时候提示403Forbidden的错误. 仔细检查了新文件夹的权限,也对比了心就网站根目录的权限,都是一样的. 最后尝试关闭了SE ...

  9. 简单快速安装Apache+PHP+MySql服务环境（二）—— centos使用yum安装php5.6

    使用默认方式yum install php安装的php版本为5.4,在使用某些PHP框架的时候可能会有问题,所以需要安装高版本的PHP. 通过yum list php*查看是否有自己需要安装的版本,如 ...

  10. [考试总结]noip模拟26

    首先看到这样中二的题目心头一震.... 然而发现又是没有部分分数的一天. 然而正解不会打.... 那还是得要打暴力. 但是这套题目有两个题目只有一个参数. 所以... (滑稽).jpg 然后我就成功用 ...