Vue3 pc端 el-input type="password" 密码至少包含一个数字，一个小写字母，一个大写字母以及一个特殊字符

在Vue3中，如果你想要在PC端的`el-input`组件上实现密码输入框，保证至少包含一个数字、一个小写字母、一个大写字母及一个特殊字符的要求，可以使用自定义指令(v-model)配合正则验证。首先，你需要安装`vue-password-validator`这个插件来进行复杂规则的验证。

1. 安装依赖：

   npm install vue-password-validator --save

2. 在你的组件中引入并使用这个插件：

<template>
  <el-form-item label="Password">
    <el-input v-model="password" type="password"
             :password-validator="{ required: true, rule: validateComplexity }"
             placeholder="请输入密码">
      <span slot="tip">{{ validationMessage }}</span>
    </el-input>
  </el-form-item>
</template>

<script setup>
import { useValidator } from 'vue-password-validator';

const validateComplexity = {
  async validator(value) {
    const regex = /^(?=.*\d)(?=.*[a-z])(?=.*[A-Z])(?=.*[!@#$%^&*()_+\-=\[\]{};':"\\|,.<>\/?]).{8,}$/;
    if (!regex.test(value)) {
      return '密码至少包含一个数字、一个小写字母、一个大写字母和一个特殊字符';
    }
    return true;
  },
  message: '密码不符合规范',
};

const { value, validationMessage } = useValidator(validateComplexity);
</script>

在这个例子中，我们定义了一个`validateComplexity`函数，它会检查输入值是否符合指定的正则表达式。如果不符合，就会返回错误信息。当用户输入发生改变时，`v-model`会触发验证，并更新`validationMessage`的显示。