案例：验证密码的强度

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. SpringCloud之eureka注册中心入门

    eureka注册中心 一.基本概念 SpringCloud封装 了Netflix公司的eureka作为自己微服务的注册中心.这个注册中心和dubbo中的zookeeper很相似,简单来说,只要你可以将 ...

  2. SpringCloud入门学习

    我相信,如果小伙伴们能来到这里,肯定对微服务有一定的认识. 我们之前创建web项目的时候,常见的有两种方式: 1).创建一个war包,然后放在servlet容器中运行(比如Tomcat等); 2).使 ...

  3. Go Web爬虫并发实现

    题目:Exercise: Web Crawler 直接参考了 https://github.com/golang/tour/blob/master/solutions/webcrawler.go 的实 ...

  4. 嵌入式设备sqlite库移植和使用

    1]官网下载sqlite-autoconf-3300100.tar.gz,网址https://www.sqlite.org/download.html,2]解压:tar zxvf sqlite-aut ...

  5. c++标准库与对应的函数

    #include <algorithm> sort(obj.begin(),obj.end());//从小到大 reverse(obj.begin(),obj.end());//从大到小 ...

  6. 网站SEO中服务器优化的三个问题

    网站做好之后,站长第一件事就是想到去做SEO,但是有一些网站在做优化的时候,出现一些奇怪的情况,比如说优化已经不错的网站,排名突然就掉下来了:还有一些网站各项优化工作都是非常认真,但是排名却一直不上来 ...

  7. docker常见操作总结

    一.原理 1.Hypervisor是一种运行在物理服务器和操作系统之间的中间软件层,可允许多个操作系统和应用共享一套基础物理硬件,它能直接访问物理设备,会给每一台虚拟机分配内存.CPU.网络.磁盘等资 ...

  8. 【python基础语法】元祖、字典、集合、数据类型的分类（第4天课堂笔记）

    """ 列表:可变数据类型,对列表内部的元素可以进行修改 元祖: tuple,不可变数据类型,是不可以进行增删查改 元祖的方法: count 查找元素的数量 index ...

  9. Intel 8086 标志寄存器及JCC指令表

    汇编 JCC指令表 JCC指条件跳转指令,CC就是指条件码. JCC指令 中文含义 英文原意 检查符号位 典型C应用 JZ/JE 若为0则跳转:若相等则跳转 jump if zero;jump if ...

  10. git文件冲突合并的报错：Your local changes to the following files would be overwritten by merge

    记录一下在项目里使用git遇到代码冲突时的解决方法 问题:当我和我同事两个人改了相同的一个文件,他在我提交前提交了,这时候我就提交不了了,并且也pull不下来他的代码 会报错: Your local ...