使用Proxy的set陷阱可实现数据验证,拦截属性赋值操作;2. 示例中对name要求为非空字符串,age要求为正整数,不符合则抛出错误;3. 每次设置属性时执行校验逻辑,确保对象数据合法性。

JavaScript中的代理(Proxy)可以拦截对象的操作,利用这一点可以在数据设置前进行验证。通过set陷阱捕获属性赋值行为,判断值是否符合预期规则,若不符合则拒绝赋值或抛出错误,从而实现数据验证。
使用Proxy拦截属性设置
创建代理时,定义set方法来监控对目标对象的写操作。每次修改属性都会经过这个函数,你可以在其中加入校验逻辑。
- 检查赋值类型是否正确,比如确保年龄是数字
- 验证值的范围,如年龄不能为负数
- 阻止非法或不合理的数据进入对象
示例:表单数据验证
假设有一个用户信息对象,要求用户名必须是字符串且非空,年龄必须是正整数。
const userData = {
name: '',
age: 0
};
const validatedUser = new Proxy(userData, {
set(target, property, value) {
if (property === 'name') {
if (typeof value !== 'string' || value.trim() === '') {
throw new Error('姓名必须是非空字符串');
}
target[property] = value.trim();
return true;
}
if (property === 'age') {
if (typeof value !== 'number' || value < 0 || !Number.isInteger(value)) {
throw new Error('年龄必须是大于等于0的整数');
}
target[property] = value;
return true;
}
// 允许其他属性(可选)
target[property] = value;
return true;
}
});
现在尝试赋值时会自动验证:
立即学习“Java免费学习笔记(深入)”;
validatedUser.name = " 张三 "; // 成功,自动去空格 validatedUser.age = 25; // 成功 validatedUser.age = -5; // 抛错 validatedUser.name = ""; // 抛错
动态扩展验证规则
可以把验证逻辑抽离成独立的规则函数,让代理更灵活。例如维护一个验证映射表,便于管理和复用。
- 每个字段对应一个或多个校验函数
- 支持自定义错误消息
- 方便在多个对象间共享验证策略
基本上就这些。用Proxy做数据验证简洁有效,特别适合需要实时拦截和控制对象行为的场景。注意别过度使用,避免影响性能或增加调试难度。










