如何用 Proxy 拦截赋值操作实现一个支持字段合法性自动验证的表单模型

可用 Proxy 拦截 set 实现表单字段实时校验，通过 schema 管理类型、必填、正则、范围等规则，在 handler.set 中执行验证并维护 errors 状态，提供 isValid、validate、reset 等接口。

可以用 Proxy 拦截 set 操作，在赋值时实时校验字段值是否符合预设规则，从而构建一个带自动校验能力的表单模型。核心在于把校验逻辑封装进 handler.set，并配合字段元数据（如类型、必填、正则、范围等）统一管理。

定义字段校验规则与元数据

每个字段应有独立的校验配置，例如：

• type：字符串、数字、邮箱、手机号等基础类型
• required：是否必填（非空或非 undefined/null）
• pattern：正则表达式（如邮箱格式 /^[^s@]+@[^s@]+.[^s@]+$/）
• min/max：数值或字符串长度限制
• message：校验失败时的提示文本

这些规则可集中存在一个 schema 对象中，键为字段名，值为校验配置对象。

用 Proxy 拦截 set 并触发校验

在 handler.set 中，先根据字段名查 schema，再执行对应校验逻辑。若失败，可抛出错误或静默记录到内部 errors 对象中（推荐后者，便于表单 UI 展示）：

• 检查字段是否存在 schema，不存在则允许赋值（兼容动态字段）
• 按 required 判断是否为空；再按 type 做基础类型转换与判断（如 Number(value) 是否为有效数字）
• 对 pattern、min、max 等逐项验证，任一失败即标记该字段错误
• 校验通过才真正写入目标对象（target[key] = value），并清除该字段的错误信息

暴露校验状态与辅助方法

Proxy 实例应提供便捷接口，方便外部使用：

• isValid()：返回整个表单是否无错误
• errors（getter）：返回当前所有字段的错误消息对象，如 { email: '邮箱格式不正确' }
• validate(field?)：手动触发单个字段或全部字段校验（用于失焦/提交前兜底）
• reset()：清空值和错误，重置为初始状态

这些方法可挂载在 Proxy 外层包装类上，保持 Proxy handler 职责单一。

实际使用示例

初始化时传入初始值和 schema：

const form = new ValidatedForm({  email: '',  age: ''}, {  email: {    required: true,    type: 'email',    message: '请输入有效邮箱'  },  age: {    type: 'number',    min: 0,    max: 120,    message: '年龄应在 0–120 之间'  }});

后续赋值即自动校验：

form.email = 'test'; // errors.email = '请输入有效邮箱'form.email = '[email protected]'; // errors.email 清空form.age = 130; // errors.age = '年龄应在 0–120 之间'

搭配 Vue/React 使用时，可监听 errors 变化驱动 UI 更新，无需额外绑定校验逻辑。