vue制作一个简单的密码强度验证动画

注册界面经常会用到的密码强度验证动画

• html标签部分（这里用到了element的ui里的表单组件，方便进行表单的非空，格式验证那些）

<el-form-item key="password" prop="password"> // element-ui属性prop="password"，自己配置的表单验证规则
        <el-input
         id="inputStrength" // 这里用的vue推荐的获取节点的方法id配上$el.querySelector获取节点
         type="password" // 该属性是让输入框内容不可见，就是密码框的意思
         v-model="ruleForm.password" 
         autocomplete="off" 
         placeholder="输入登录密码"
         show-password // element-ui属性，眼睛图标，点击可查看表单内容
         clearable // element-ui属性，表单输入内容后可以清空表单的图标
         ></el-input>
         <div class="strength"> // 用来展示动画效果
         <span ref="span" v-for="item in 3" :key="item"></span>
         </div>
  </el-form-item>

• css代码部分（这里用了scss预处理器）

<style lang="scss"> // 这是修改element-ui默认样式的一个方法，把scoped属性去掉，然后在控制台找到element组件的类名修改即可，有的权重不够的可以!important，一定一定要给修改的组件套一层盒子，不然会影响全局的element组件。
.el-input__inner {
      width: 528px;
      height: 50px;
    }
</style>
<style lang="scss" scoped> // 这是正常标签部分
  .strength {
          text-align: left;
          width: 528px;
          margin: 0 auto;
          span {
            width: 60px;
            height: 5px;
            border: 1px solid #ccc;
            margin-left: 5px;
            display: inline-block;
          }
        }
</style>

• js代码部分

<script>
export default {
  name: '',
  mounted() {
    this.onStrength(); // 钩子函数调用一次
    },
    methods: {
    onStrength() {
      let input = this.$el.querySelector("#inputStrength"); // 获取输入框节点
      let span = this.$refs.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 = "#005BFF";
          }
        }
      };
      const a = (e) => {
        let num = 0;

        if (e.match(/\d/g)) {
          num++;
        }
        if (e.match(/[a-z]/gi)) {
          num++;
        }
        if (
          e.match(
            "[`~!@#$^&*()=|{}':;',\\[\\].<>《》./~！@#￥……&*（）——|{}【】‘；：”“'。，、？ ]"
          )
        ) {
          num++;
        }
        return num;
      };
    },
    }
}
</script>