vue密码强度

html：

<div class="intensity">

                  <span class="psdText">密码强度</span>

                  <span

                    class="line"

                    :class="[level.includes('low') ? 'low' : '']"

                  ></span>

                  <span

                    class="line"

                    :class="[level.includes('middle') ? 'middle' : '']"

                  ></span>

                  <span

                    class="line"

                    :class="[level.includes('high') ? 'high' : '']"

                  ></span>

                </div>

在密码的验证规则里======================================================

//密码强度

              this.level = [];

              // 校验是数字

              const regex1 = /^\d+$/;

              // 校验字母

              const regex2 = /^[A-Za-z]+$/;

              // 校验符号

              const regex3 =

                /^[`~!@#$%^&*()_\-+=<>?:"{}|,.\/;'\\[\]·~！@#￥%……&*（）——\-+={}|《》？：“”【】、；‘'，。、]+$/;

              if (regex1.test(value)) {

                this.level.push("low");

              } else if (regex2.test(value)) {

                this.level.push("low");

              } else if (regex3.test(value)) {

                this.level.push("low");

              } else if (/^[A-Za-z\d]+$/.test(value)) {

                this.level.push("low");

                this.level.push("middle");

              } else if (

                /^[`~!@#$%^&*()_\-+=<>?:"{}|,.\/;'\\[\]·~！@#￥%……&*（）——\-+={}|《》？：“”【】、；‘'，。、\d]+$/.test(

                  value

                )

              ) {

                this.level.push("low");

                this.level.push("middle");

              } else if (

                /^[`~!@#$%^&*()_\-+=<>?:"{}|,.\/;'\\[\]·~！@#￥%……&*（）——\-+={}|《》？：“”【】、；‘'，。、A-Za-z]+$/.test(

                  value

                )

              ) {

                this.level.push("low");

                this.level.push("middle");

              } else if (

                /^[`~!@#$%^&*()_\-+=<>?:"{}|,.\/;'\\[\]·~！@#￥%……&*（）——\-+={}|《》？：“”【】、；‘'，。、A-Za-z\d]+$/.test(

                  value

                )

              ) {

                this.level.push("low");

                this.level.push("middle");

                this.level.push("high");

              }

              return callback();

html===================================================================

.intensity {

      .psdText {

        font-size: 14px;

        margin-right: 10px;

      }

      .line {

        display: inline-block;

        width: 48px;

        height: 4px;

        background: #d8d8d8;

        border-radius: 3px;

        margin-right: 8px;

        &.low {

          background: #f4664a;

        }

        &.middle {

          background: #ffb700;

        }

        &.high {

          background: #2cbb79;

        }

      }

      .level {

        margin: 0 16px 0 8px;

      }

    }