proxy 的 set 陷阱不能直接校验类型,但可结合 schema 实现运行时字段校验:根据 key 查规则,转换并校验值(如字符串转数字、邮箱正则匹配),失败则抛出带上下文的错误,配合 input 事件实现输入即校验。

Proxy 的 set 陷阱本身不能直接校验表单输入的“类型”,但它可以作为运行时数据拦截层,配合 schema 规则(如字段类型、必填、范围等),在赋值时做即时校验与报错。关键在于:把表单数据对象用 Proxy 包裹,set 中根据字段名查规则、转换/校验值、抛出错误或静默修正。
绑定字段规则与动态校验逻辑
先定义一个轻量 schema,比如:
{
age: { type: 'number', min: 0, max: 150, required: true },
email: { type: 'string', format: 'email' },
isActive: { type: 'boolean' }
}
在 set 陷阱中,根据 key 查 schema,对新值做类型转换和校验:
FastAPI + Flask 混合部署最佳实践,解决路由定义、API 代理等常见问题,适用于同时运行 FastAPI API 与 Flask 前端的场景。
- 字符串数字(如
"25")→ 转为25再校验是否在min/max范围内 -
"true"/"false"→ 转为布尔;非布尔字面量(如"yes")直接报错 - 邮箱字段用正则快速判别,不满足格式就
throw new Error()
拦截并统一报错,避免静默失败
不要只返回 false(严格模式下会报 TypeError,但语义模糊),而是主动抛出带上下文的错误:
throw new TypeError(`[age] 期望 number,收到 "${value}"(${typeof value})`)- 错误可被表单组件捕获,显示在对应输入框下方,实现“输入即校验”体验
- 若需兼容旧逻辑(如允许空字符串转
undefined),可在校验前做归一化,但报错仍应发生在校验环节
与 input 事件联动,实时响应
将 Proxy 对象绑定到表单状态(如 formData),input 事件中执行 formData[key] = $event.target.value:
- 用户输
"abc"到 age 输入框 →set('age', 'abc')→ 校验失败 → 抛错 → 组件捕获并高亮提示 - 用户删光内容 →
set('age', '')→ 若字段必填,立即报错;若允许空,则按规则转为null或保留空字符串 - 注意:原始 input 值始终是字符串,转换逻辑必须放在
set内,而非依赖 input 的type="number"(浏览器不阻止非法字符粘贴)
补充:支持异步校验(如唯一性检查)需另设机制
set 是同步陷阱,无法 await。对需要发请求的校验(如用户名是否已存在):
- 不在
set中阻塞,而是触发一个异步校验任务,结果存入独立状态(如validity.username) -
set只负责同步规则(类型、格式、范围),异步结果通过 watch 或 computed 反馈到 UI - 提交时再汇总同步 + 异步错误,统一拦截










