Vue3 pc端 el-input type="password" 密码至少含3种以上字符

在Vue3中，如果你想要实现一个PC端的`el-input`输入框，其中密码默认需要包含至少三种不同类型字符的要求，通常你会在`v-model`绑定的自定义事件处理器中添加验证逻辑。你可以使用正则表达式来检查输入的内容是否满足条件。这里是一个简单的例子：

<template>
  <el-form-item label="密码">
    <el-input v-model="password" placeholder="请输入密码" type="password"
      @input="validatePassword"></el-input>
    <span v-if="passwordInvalid">密码应至少包含大写字母、小写字母和数字</span>
  </el-form-item>
</template>

<script>
export default {
  data() {
    return {
      password: '',
      passwordInvalid: false,
    };
  },
  methods: {
    validatePassword(e) {
      const regex = /^(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{6,}$/; // 至少6位，包含大写、小写字母和数字
      this.passwordInvalid = !regex.test(e.target.value);
    },
  },
};
</script>

在这个例子中，我们在`@input`事件中对输入值进行实时验证。如果输入的密码不符合规则（即至少三种不同类型字符），我们会在标签旁边显示错误提示。