案例：验证密码的强度

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. Java数据结构--双向链表的实现

    #java学习经验总结------双向链表的实现 双向链表的建立与单链表类似,只是需要使用pre指针指向前一个结点,并且在删除添加时不仅仅考虑next package datastructure; p ...

  2. P2214 [USACO14MAR]哞哞哞Mooo Moo

    链接:Miku ---------------------- 这道题还是个背包 --------------------- 首先看一下声音的组成,对于每一个农场的声音,它是由两部分组成的 :上一个农场 ...

  3. jsx中的路径拼接

    <img style={{height:80,width:80}} src={"/images/"+index+ ".jpg"}/>其中 index ...

  4. Eclipse部署项目，常见几个问题解决方案

    一.java compiler level does not match the version of the inst 解决方案:(一般出现在拷贝项目) 第一步:在Eclipse环境中,鼠标右键选择 ...

  5. es5和es6创建新数组的方法

    //es5 let array = Array(5) let array = [] //es6 1.let array = Array.of(1,2,3,4,5) 2.let array = Arra ...

  6. Python小白

      .IDLE软件为内建于CPython的集成开发环境(IDE),包括编辑器,编译或解释器,调试器       .py(后缀保存) 2.行一,单行注释     多行,”””    ‘’’  之后,内建 ...

  7. P1527 [国家集训队]矩阵乘法 [整体二分]

    权值排序,整体二分,没了. // by Isaunoya #include <bits/stdc++.h> using namespace std; #define rep(i, x, y ...

  8. 与soul上的一个妹子聊天有感

    写此篇的原因: 妹子说,我考上公务员了~,当时自己自己顿时哽咽了,不知道说什么,习惯性的说了句,恭喜恭喜啊.感受到妹子的欢喜与喜悦,我也没必要打扰她的兴致,她开心就好了嘛. 每个人的成就都是自己奋斗的 ...

  9. 在RYU中实现交换机的功能

    首先源码,解析部分如下,同时可以参考RYU_BOOK上的解释说明  原文链接参考:https://blog.csdn.net/qq_34099967/article/details/89047741 ...

  10. Java多线程之synchronized和volatile

    概述 用Java来开发多线程程序变得越来越常见,虽然Java提供了并发包来简化多线程程序的编写,但是我们有必要深入研究一下,才能更好的掌握这块知识. 本文主要对Java提供的底层原语synchroni ...