案例：验证密码的强度

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. 刷题84. Largest Rectangle in Histogram

    一.题目说明 题目84. Largest Rectangle in Histogram,给定n个非负整数(每个柱子宽度为1)形成柱状图,求该图的最大面积.题目难度是Hard! 二.我的解答 这是一个 ...

  2. 如何在Idea中使用Git将项目代码上传到码云

    参考链接:https://blog.csdn.net/zzybbh/article/details/88172140

  3. LeetCode 面试题24. 反转链表

    题目链接:https://leetcode-cn.com/problems/fan-zhuan-lian-biao-lcof/ 定义一个函数,输入一个链表的头节点,反转该链表并输出反转后链表的头节点. ...

  4. R语言入门：向量初探

    R语言主要用于统计,因此引入了向量这个概念将更好地进行统计计算,在其他无法引入向量的语言当中则会使用循环来计算一些大规模的数据,在R语言当中则不需要,下面我们来看看R语言当中向量的具体用法吧! 首先, ...

  5. disabled属性对form表单提交的影响

    在form表单里,如果对input加入disabled="disabled"或disabled="true"等属性,form表单提交的时候,就不会传值到后台. ...

  6. Newtonsoft--自定义格式化日期

    public string ToJson(object obj, string timeFormat) { try { IsoDateTimeConverter timeConverter = new ...

  7. XGBoost学习笔记1

    XGBoost XGBoost这个网红大杀器,似乎很好用,完事儿还是自己推导一遍吧,datacamp上面有辅助的课程,但是不太涉及原理 它究竟有多好用呢?我还没用过,先搞清楚原理,hahaha~ 参考 ...

  8. Markdown 的效果

    这是一级标题 这是二级标题 这是三级标题 这是四级标题 这是五级标题 这是六级标题 这是加粗的文字 这是倾斜的文字 这是斜体加粗的文字 这是加删除线的文字 这是引用的内容 这是引用的内容 这是引用的内 ...

  9. react 项目 测试

    Enzyme 来自 airbnb 公司,是一个用于 React 的 JavaScript 测试工具,方便你判断.操纵和历遍 React Components 输出.Enzyme 的 API 通过模仿 ...

  10. win10修改jupyter notebook默认路径

    安装anaconda3 ,因此自带jupyter notebook 发送到jupyter notebook到桌面快捷方式 右击属性,将目标的%USERPROFILE%,修该为自己需要的路径 起始位置修 ...