Vue3 + TypeScript + Ant Design Vue 实战：密码表单校验与拓展功能（强度提示 + 显示/隐藏密码）

在前端开发中，注册或修改密码表单非常常见。一个好的表单不仅要校验必填和确认密码一致，还要保证良好的用户体验。

本文将展示如何使用 Vue3 + TypeScript + Ant Design Vue 实现一个 基础密码表单，并在拓展部分增加 密码强度提示和显示/隐藏功能。

---

一、需求分析

• 初始密码必填

• 确认密码必填且与初始密码一致

• 提交时触发校验

• 可重置表单

• 拓展：密码强度提示 + 显示/隐藏密码

---

二、核心代码解析

我们可以通过 Ant Design Vue 的 Form 校验规则实现。下面是完整示例：

const rules: Record<string, Rule[]> = {// 密码必填password: [{ required: true, message: "请输入初始密码" }],// 确认密码校验规则confirmPassword: [{validator: async (_rule, value) => {// 1. 必填校验if (!value) {return Promise.reject("请输入确认密码");}// 2. 一致性校验if (value !== form.password) {// 注意：不要直接清空输入，否则用户每次输错一个字就被清空了return Promise.reject("两次密码输入不一致");}// 校验通过return Promise.resolve();},trigger: ["blur", "change"], // blur 和 change 都触发校验},],
};

代码解析

1. password 字段

   • 使用 required: true 表示必填，并设置提示信息。

2. confirmPassword 字段

   • 通过 validator 自定义校验函数，支持异步校验。

   • 必填校验：如果用户没有输入，直接 Promise.reject 提示。

   • 一致性校验：