案例：验证密码的强度

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. python第三方库的安装pip的使用与换源(解决pip下载速度慢)

    python和其他语言一样,也有大量的第三方库 在安装python时默认都会安装pip,安装了pip后 在cmd.exe下可以运行pip 安装库 pip install 库的名字 换源 因为PyPi地 ...

  2. 关于hp proliant sl210t服务器raid 1阵列配置（HP P420/Smart Array P420阵列卡配置）

    hp proliant sl210t服务器,一般都会带有两个阵列卡 一个服务器自带的Dynamic Smart Array B120i RAID控制器,一个为Slot卡槽上的Smart Array P ...

  3. 【macOS使用技巧】使用空格键快速预览文件内容

    Quickview 是mac系统上一个强大的预览功能, 可以预览 mp4 mov等音频文件, 当然图片.文本.也都可以进行预览. 在系统中如果你希望快速浏览一下文件而不想打开的文件的话只要选择文件然后 ...

  4. 基于axios的万能封装

    一 . 命名axios.js import axios from 'axios'; export default function ajax(url = '', params = {}, type = ...

  5. mysql-主从备份问题小结

    一:防火墙 常用命令 firewall-cmd --state 或 systemctl status firewalld # 查看状态 systemctl start firewalld# 启动 sy ...

  6. C语言实现读取字符转换为浮点数，不使用scanf函数

    c语言读取int或者float数据,我们习惯于使用scanf函数,但是如果不使用scanf函数,该怎么实现呢. 这里就来尝试一下,不使用scanf来读取数据并转换为float类型. 下面的getflo ...

  7. 【MVC+EasyUI实例】对数据网格的增删改查（上）

    前言 此案例是针对之前做的一个小例子的后台框架的修改,从以前的三层框架改为现在的MVC框架,也是做了一次MVC和EasyUI的结合,分为2篇文章来阐述. 界面如下: 点击"添加"按 ...

  8. 虚拟机（linux）怎么上网

    问题描述:本机并没有显示虚拟机(linux)的虚拟网卡,那能不能用虚拟机上网呢,如果要让本机显示出虚拟机的虚拟网卡会有一万步各种安装卸载,那么,在现有条件下可不可以上网呢,答案是可以的. 解决方案: ...

  9. JSP+Servlet+Ajax实现用户增删改查的例子

    一.数据库设计 用户表User 已有的测试数据 二.Java代码编写 Java EE的架构一般分为以下五层: ①.Domain ②.DAO ③.Service ④.Controller ⑤.View ...

  10. PHP0009：PHP基础-mysql

    以管理员省份启动记事本 修改host文件 插入外部sql数据