用 computed 实现动态表单验证提示，核心是将规则和提示文案转为响应式计算结果，使其随用户操作、选项切换、字段依赖实时更新；通过 dirty 状态控制显隐，避免误报；支持多字段联动与强度类可视化反馈。
用 computed 实现动态表单验证提示，核心是把“规则”和“提示文案”都变成响应式计算结果，而不是写死在 data 或 rules 对象里。这样提示能随用户操作、选项切换、字段依赖关系实时变化，不卡顿、不误报，体验更自然。
提示文案随字段状态实时更新
比如邮箱输入框，提示不能只是“邮箱格式错误”，而应区分不同阶段：
- 为空时显示“请输入邮箱”
- 非空但格式不对时显示“邮箱格式不正确”
- 格式正确但已被注册时显示“该邮箱已被使用”（需配合异步校验结果）
这些文案可统一由一个 computed 属性生成：
emailTip() {if (!this.form.email) return '请输入邮箱';
if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(this.form.email)) return '邮箱格式不正确';
if (this.emailTaken) return '该邮箱已被使用';
return ''; // 无错误时不显示提示
}
提示显隐受“脏状态”控制
避免用户刚点进输入框就弹红字——这会打击操作信心。引入 dirty 标志（如 emailTouched），只在用户真正编辑过该字段后才激活提示：
- input 事件中设 this.emailTouched = true
- computed 提示逻辑加一层判断：return this.emailTouched ? emailTip() : ''
- 提交成功后重置所有 touched 状态，下次打开表单清爽无提示
多字段联动时提示自动适配
例如：选择“海外地区”后，“手机号”变为非必填、“电话号码”变为必填。此时提示文案也要同步切换：
- 用 computed 动态返回整个 rules 对象，其中每个字段的 message 值可基于当前 areaCode 计算
- 当 areaCode === -30（海外），receiverMobile 的 message 可设为“可选填写”，receiverPhone 的 message 则强调“请填写有效联系电话”
- Element UI 中配合 :validate-on-rule-change="false"，防止规则一变就触发校验，只在 submit 或 blur 时校
强度类提示做可视化反馈
密码强度不是简单对错，而是渐进感知。computed 可返回结构化信息：
passwordStatus() {const len = this.form.password.length;
const hasUpper = /[A-Z]/.test(this.form.password);
const hasSpecial = /[^A-Za-z0-9]/.test(this.form.password);
if (len if (len return { level: '强', color: '#67c23a', tip: '安全性高' };
}
模板中直接绑定 color 和 tip，进度条颜色、文字说明、图标状态全部联动更新。
