案例：验证密码的强度

1. 给我密码,我返回对应的级别

2. 每次键盘抬起都要获取文本框中的内容, 验证文本框中有什么东西, 得到一个级别, 然后下面的div显示对应的颜色

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <title>Document</title>

</head>

<style type="text/css">

  #dv {

    width: 300px;

    height: 200px;

    position: absolute;

    left: 300px;

    top: 100px;

  }

  .strengthLv0 {

    height: 6px;

    width: 120px;

    border: 1px solid #ccc;

    padding: 2px;

  }

  .strengthLv1 {

    background: red;

    height: 6px;

    width: 40px;

    border: 1px solid #ccc;

    padding: 2px;

  }

  .strengthLv2 {

    background: orange;

    height: 6px;

    width: 80px;

    border: 1px solid #ccc;

    padding: 2px;

  }

  .strengthLv3 {

    background: green;

    height: 6px;

    width: 120px;

    border: 1px solid #ccc;

    padding: 2px;

  }

</style>

<body>

  <div id="dv">

    <label for="pwd">密码</label>

    <input type="text" id="pwd" maxlength="16">

    <!--课外话题-->

    <div>

      <em>密码强度：</em>

      <em id="strength"></em>

      <div id="strengthLevel" class="strengthLv0"></div>

    </div>

  </div>

  <script src="common.js"></script>

  <script>

    //获取文本框注册键盘抬起事件

    my$("pwd").onkeyup = function () {

      //每次键盘抬起都要获取文本框中的内容,验证文本框中有什么东西,得到一个级别,然后下面的div显示对应的颜色

      //如果密码的长度是小于6的,没有必要判断

      my$("strengthLevel").className = "strengthLv" + (this.value.length >= 6 ? getLvl(this.value) : 0);

    };

    //给我密码,我返回对应的级别

    function getLvl(pwd) {

      var lvl = 0;//默认是0级

      //密码中是否有数字,或者是字母,或者是特殊符号

      if (/[0-9]/.test(pwd)) {

        lvl++;

      }

      //判断密码中有没有字母

      if (/[a-zA-Z]/.test(pwd)) {

        lvl++;

      }

      //判断密码中有没有特殊符号

      if (/[^0-9a-zA-Z_]/.test(pwd)) {

        lvl++;

      }

      return lvl;//最小的值是1,最大值是3

    }

  </script>

</body>

</html>

JS高级---案例：验证密码的强度的更多相关文章

  1. JS高级---案例：验证表单

    案例:验证表单 <!DOCTYPE html> <html lang="en"> <head> <meta charset="U ...

  2. JS高级---案例：验证用户输入的是不是中文名字

    案例:验证用户输入的是不是中文名字 [\u4e00-\u9fa5] <!DOCTYPE html> <html lang="en"> <head> ...

  3. JS高级---案例：验证用户输入的是不是邮箱

    案例:验证用户输入的是不是邮箱 <!DOCTYPE html> <html lang="en"> <head> <meta charset ...

  4. JS高级---案例贪吃蛇，把封装的函数移动到js文件中

    案例贪吃蛇,把封装的函数移动到js文件中 <!DOCTYPE html> <html lang="en"> <head> <meta ch ...

  5. JS高级---案例：随机小方块 （贪吃蛇的食物部分）

    案例:随机小方块 产生随机数对象,自调用构造函数 产生小方块对象,自调用构造函数,里面存放: 食物的构造函数 给原型对象添加方法:初始化小方块的显示的效果及位置---显示地图上 给原型对象添加方法,产 ...

  6. js简单正则表达式验证密码

    包含3种及以上 var reg = new RegExp("^(?![A-Za-z]+$)(?![A-Z\\d]+$)(?![A-Z\\W]+$)(?![a-z\\d]+$)(?![a-z\ ...

  7. JS高级---案例：贪吃蛇小游戏

    案例:贪吃蛇小游戏 可以玩的小游戏,略复杂,过了2遍,先pass吧 先创建构造函数,再给原型添加方法.分别创建食物,小蛇和游戏对象. 食物,小蛇的横纵坐标,设置最大最小值,运动起来的函数,按上下左右键 ...

  8. JS简单验证密码强度

    <input type="password" id="password" value=""/><button id=&qu ...

  9. js验证密码强弱

    JS密码强度验证 <%@ Page Language="C#" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML ...

随机推荐

  1. Azure Media Services -可提供视频点播（VOD）

    ​Azure Media Services 提供直播/VOD点播相关的功能. •提供编码和打包以适用于各种设备播放视频(IOS/Android/web等). •向大量在线观众流式传输实时直播,例如活动 ...

  2. Linux下使用Tomcat

    切换到root账户. tomcat依赖jdk,先安装jdk,注意tomcat对jdk的版本有要求,要看一下tomcat.jdk的版本是否对应. 1.下载tomcat7 不使用软件源,自己下载安装,这样 ...

  3. 回炉重造之重读Windows核心编程-001-错误处理

    Windows处理错误靠的是API的返回值,类型不止一种种: VOID,函数不可能失败,Windows API的返回值很少是这个情况. BOOL,如果函数失败,则返回值是0,否则返回是非零值.不要测试 ...

  4. Linux下的python3，virtualenv，Mysql、nginx、redis等常用服务安装配置

    Linux下的python3,virtualenv,Mysql.nginx.redis等常用服务安装配置   学了前面的Linux基础,想必童鞋们是不是更感兴趣了?接下来就学习常用服务部署吧! 安装环 ...

  5. spring boot 集成 Mybatis，JPA

    相对应MyBatis, JPA可能大家会比较陌生,它并不是一个框架,而是一组规范,其使用跟Hibernate 差不多,原理层面的东西就不多讲了,主要的是应用. Mybatis就不多说了,SSM这三个框 ...

  6. 吴裕雄--天生自然HADOOP操作实验学习笔记：hive安装

    实验目的 了解hive的原理和安装方式 学习使用MySQL数据库 使用hive进行基本操作 实验原理 1.Hive Hive是一个数据仓库技术,包括解释器.编译器.优化器,一次将一个sql语句装化为m ...

  7. 清北学堂—2020.1提高储备营—Day 2 morning（并查集、堆）

    qbxt Day 2 morning --2020.1.18 济南 主讲:李佳实 目录一览 1.并查集 2.堆 总知识点:基础数据结构 一.并查集 1.描述:并查集是一类十分常用的数据类型,它有着十分 ...

  8. Window Api 通过账号密码访问共享文件夹

    using System; using System.Runtime.InteropServices; namespace PushGCodeService { public class Shared ...

  9. js替换时，空格被替换为双引号

    替换代码 str.replace(/\"/g, "'") 将双引号替换为单引号,如果字符串中,存在space(空格)时,使用以上语句将会导致空格被替换为双引号,可以使用如 ...

  10. Django-模型（二）

    条件查询 字段查询 实现sql中where的功能,调用过滤器filter().exclude().get(),下面以filter()为例. 通过"属性名_id"表示外键对应对象的i ...