验证密码强度

在注册页面通常需要提示密码强度

可以通过前端设置密码等级验证完成

效果图如下：

主要使用正则判断

js代码如下

 let input = document.getElementsByTagName("input")[0];
      let span = document.querySelectorAll("span");

      input.oninput = function () {
        for (let i = 0; i < span.length; i++) {
          span[i].style.background = "";
          if (i < a(this.value)) {
            span[i].style.background = "#43ff05";
          }
        }
      };
      const a = (e) => {
        let num = 0;
        let pattern = new RegExp(
          "[`~!@#$^&*()=|{}':;',\\[\\].<>《》./~！@#￥……&*（）——|{}【】‘；：”“'。，、？ ]"
        );
        if (e.match(/\d/g)) {
          num++;
        }
        if (e.match(/[a-z]/gi)) {
          num++;
        }
        if (pattern.test(e)) {
          num++;
        }
        return num;
      };

通过正则校验，如果存在某种符号，相关值++

相应的span背景色点亮

html部分代码

 <div class="box">
      <label for="" class="input">
        密码：<input type="password" onblur="upperCase()" />
        <div>
          <span> </span>
          <span> </span>
          <span> </span>
          <div class="pswClass">密码强度</div>
        </div>
      </label>
    </div>

完整代码地址：

gitee.com/beizhongjiu…