如何用 Proxy 拦截赋值操作实现一个支持字段合法性自动校验的表单模型
想让表单在用户输入时就能自动检查数据是否合法吗？利用 Ja vaScript 的 Proxy 拦截 set 操作，完全可以在赋值的那一刻就触发校验逻辑，从而构建一个自带“实时纠错”能力的智能表单模型。这背后的核心思路，就是把校验规则封装进 handler.set 陷阱，再配合一套定义清晰的字段元数据（比如类型、必填项、正则表达式、取值范围等）进行统一管理。
定义字段校验规则与元数据
一个健壮的校验模型，首先得为每个字段定义清晰的“游戏规则”。通常，一套完整的校验配置会包含以下几项：
- type：指定字段的基础类型，比如字符串、数字，或是更具体的邮箱、手机号等。
- required：一个布尔值，决定该字段是否必须填写（不能为空或 undefined/null）。
- pattern：用于格式校验的正则表达式，例如验证邮箱的经典模式：
/^[^\s@]+@[^\s@]+\.[^\s@]+$/。 - min/max：对数值或字符串长度进行限制。
- message：校验失败时，展示给用户的友好提示文本。
这些规则最好集中管理。一个常见的做法是，用一个名为 schema 的对象来存储，其键是字段名，值就是对应的校验配置对象。
用 Proxy 拦截 set 并触发校验
真正的魔法发生在 Proxy 的 handler.set 陷阱里。当尝试给表单对象的某个属性赋值时，这里的逻辑会被触发。其工作流程大致如下：
- 首先，根据字段名去
schema里查找对应的校验规则。如果没找到，通常直接允许赋值，这为动态字段提供了灵活性。 - 如果找到了规则，就按顺序执行校验：先看
required规则判断是否为空；接着根据type进行基础类型判断和转换（比如确保Number(value)的结果是有效数字）。 - 然后，再依次检查
pattern、min、max等限制条件。任何一项失败，都会立即标记该字段为错误状态。 - 只有所有校验都通过，值才会被真正写入目标对象（即执行
target[key] = value），同时，该字段之前记录的任何错误信息都会被清除。
这里有个关键设计点：校验失败时，是抛出错误还是静默记录？对于表单场景，更推荐后者——将错误信息记录在一个内部的 errors 对象里。这样做的好处是，前端UI可以轻松地获取并展示这些错误，用户体验更流畅。
暴露校验状态与辅助方法
为了让这个Proxy表单模型好用，我们还需要给它披上一件方便调用的“外衣”，暴露一些实用的接口：
isValid()：一个方法，快速告诉你整个表单当前是否所有字段都有效。errors（getter）：一个属性，返回当前所有字段的错误信息对象，格式类似{ email: '邮箱格式不正确' }，方便UI直接绑定。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 = 'user@example.com'; // 校验通过，errors.email 被清空 form.age = 130; // errors.age 变为 '年龄应在 0–120 之间'
当你在 Vue 或 React 等框架中使用时，其魅力就完全展现出来了：只需监听这个表单模型的 errors 对象变化，UI 就能自动更新错误提示，完全不需要在组件里编写额外的、重复的校验绑定逻辑。这，才是提升开发效率的关键所在。
