＜meter＞标签实现密码强度效果

等下吃什么？

于 2021-12-10 17:33:42 发布

阅读量668

点赞数 2

分类专栏： Html5 CSS 文章标签：前端 html5 css

本文链接：https://blog.csdn.net/weixin_44240581/article/details/121828602

版权

CSS 同时被 2 个专栏收录

11 篇文章 0 订阅

订阅专栏

Html5

6 篇文章 1 订阅

订阅专栏

灵感方法来源：https://www.zhangxinxu.com/wordpress/2021/11/html-meter-password/

meter标签 + zxcvbn算法

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>

<body>

 <input type="password" oninput="checkPassword()">

  <!--
    min:  最小值，默认0
    max:  最大值，默认1
    low:  低值区上限，如果在[min, low]区间，会有特殊视觉效果
    high: 高值区下限，如果在[high, max]区间，会有特殊视觉效果
    optimum: 指示最优取值或区间， e.g. [min, optimum, low] lower区间是最佳范围
  -->
  <!-- guesses_log10 的值在 12 以上，密码强度就已经很强了，考虑到弱中强三种状态的色条范围是三等分 -->
  密码强度：<meter min="0" max="12" low="4" high="8" optimum="10" />

</body>
</html>

<!-- 密码强度的计算: 使用开源的公认的算法 → zxcvbn：https://github.com/dropbox/zxcvbn -->
<script src="https://cdn.bootcdn.net/ajax/libs/zxcvbn/4.4.2/zxcvbn.js"></script>
<script>
  let objResult = zxcvbn('your password');

  /**
   * objResult 包含下面这些属性
   *
   * @param {number} calc_time           - zxcvbn 计算此密码强度花费的时间，单位是毫秒 ms
   * @param {object} crack_times_display - （不同运算力下的破解时间，字符描述展示）
   * @param {object} crack_times_seconds - （不同运算力下的破解时间，数值展示）
   * @param {object} feedback            - 反馈与建议
   * @param {number} guesses             - 估计破解密码所需时间
   * @param {number} guesses_log10       - guesses lg10的运算结果
   * @param {string} password            - 你输入的密码
   * @param {number} score               - 密码安全性得分 | 整数 0~4
   * @param {array} sequence             - 预测计算
   * */
  console.log(objResult);
</script>
<script>
  function checkPassword() {
    const inputValue = document.querySelector('input').value;
    const intension = document.querySelector('meter');

    intension.value = zxcvbn(inputValue).guesses_log10;
  }
</script>

在这里插入图片描述

加点小细节

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
    /* 确定强度条的宽高，用于平均分块 */
    ::-webkit-meter-bar {
      width: 120px;
      height: 12px;
      border: 0;

        /* 用遮罩添加间隔 */
      /*-webkit-mask: linear-gradient(to right, red 39px, transparent 0 41px, orange 0 79px, transparent 0 81px, green 0);*/
    }
    /* value 处于 [min, low]时 */
    ::-webkit-meter-even-less-good-value {
      background: red;
    }
    /* value 处于 [low, optimum]时 */
    ::-webkit-meter-suboptimum-value {
      /*background: linear-gradient(to right, red 40px, orange 0);*/
      background: linear-gradient(to right, red 40px, orange 0);
    }
    /* value 处于 [optimum, max]时 */
    ::-webkit-meter-optimum-value {
      background: linear-gradient(to right, red 40px, orange 0 80px, green 0);
    }

    /* 用伪元素添加间隔 */
    meter::before {
        content: '';
        display: block;
        width: 40px;
        height: 12px;
        box-sizing: border-box;
        border-width: 0 2px 0 2px;
        border-color: #fff;
        border-style: solid;
        position: relative;
        left: 39px;
        top: 13px;
        z-index: 2;
        margin-top: -12px;
    }

    /* 用伪元素添加文字说明 */
    meter::after {
        content: '强 中 弱 aaaaaaaaaaaaaaaaaa';
        display: inline-block;
        width: 120px;
        line-height: 20px;
        height: 20px;
        overflow: hidden;
        text-align: justify;
        box-sizing: border-box;
        padding: 0 15px;
        position: absolute; /* 脱离文本流，不挤占位置 */

        font-weight: bold;
        -webkit-text-fill-color: transparent;
        background: linear-gradient(to right, red 40px, orange 0 80px, green 0);
        -webkit-background-clip: text;
    }
  </style>
</head>

<body>

 <input type="password" oninput="checkPassword()">

  <!--
    min:  最小值，默认0
    max:  最大值，默认1
    low:  低值区上限，如果在[min, low]区间，会有特殊视觉效果
    high: 高值区下限，如果在[high, max]区间，会有特殊视觉效果
    optimum: 指示最优取值或区间， e.g. [min, optimum, low] lower区间是最佳范围
  -->
  <!-- guesses_log10 的值在 12 以上，密码强度就已经很强了，考虑到弱中强三种状态的色条范围是三等分 -->
  密码强度：<meter min="0" max="12" low="4" high="8" optimum="10" />
</body>
</html>

<!-- 密码强度的计算: 使用开源的公认的算法 → zxcvbn：https://github.com/dropbox/zxcvbn -->
<script src="https://cdn.bootcdn.net/ajax/libs/zxcvbn/4.4.2/zxcvbn.js"></script>
<script>
  let objResult = zxcvbn('your password');

  /**
   * objResult 包含下面这些属性
   *
   * @param {number} calc_time           - zxcvbn 计算此密码强度花费的时间，单位是毫秒 ms
   * @param {object} crack_times_display - （不同运算力下的破解时间，字符描述展示）
   * @param {object} crack_times_seconds - （不同运算力下的破解时间，数值展示）
   * @param {object} feedback            - 反馈与建议
   * @param {number} guesses             - 估计破解密码所需时间
   * @param {number} guesses_log10       - guesses lg10的运算结果
   * @param {string} password            - 你输入的密码
   * @param {number} score               - 密码安全性得分 | 整数 0~4
   * @param {array} sequence             - 预测计算
   * */
  console.log(objResult);
</script>
<script>
  function checkPassword() {
    const inputValue = document.querySelector('input').value;
    const intension = document.querySelector('meter');

    intension.value = zxcvbn(inputValue).guesses_log10;
  }
</script>

在这里插入图片描述

等下吃什么？

关注

2
点赞
踩
1

收藏

觉得还不错? 一键收藏
1
评论
＜meter＞标签实现密码强度效果

灵感方法来源：https://www.zhangxinxu.com/wordpress/2021/11/html-meter-password/meter标签 + zxcvbn算法<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body> <inpu.
复制链接

扫一扫