JavaScript代理实现数据验证方法

本文介绍了如何利用JavaScript的Proxy对象在数据写入时实现灵活、可复用的数据验证机制——通过set拦截器实时校验属性值的类型、格式与范围，并支持将验证逻辑抽象为独立配置对象，既保障了数据的可靠性，又提升了代码的可维护性与通用性，是构建健壮前端数据层的实用技巧。

在JavaScript中，使用代理（Proxy）可以拦截对象的操作，比如读取、写入属性。利用这个特性，可以在数据写入时进行验证，确保数据符合预期规则。

创建带验证逻辑的代理

通过定义 set 拦截器，可以在设置属性值时执行验证函数。如果数据不合法，抛出错误；否则允许赋值。

const validator = {
  set(target, property, value) {
    // 验证 age 必须是 0-150 的数字
    if (property === 'age') {
      if (typeof value !== 'number' || value  150) {
        throw new Error('age 必须是 0 到 150 之间的数字');
      }
    }

    // 验证 name 必须是非空字符串
    if (property === 'name') {
      if (typeof value !== 'string' || value.trim() === '') {
        throw new Error('name 必须是非空字符串');
      }
    }

    // 符合条件则保存值
    target[property] = value;
    return true;
  }
};

const user = new Proxy({}, validator);

user.name = 'Alice';  // 成功
user.age = 25;        // 成功

// user.name = '';     // 抛错：name 必须是非空字符串
// user.age = -5;      // 抛错：age 必须是 0 到 150 之间的数字
  

支持动态验证规则

可以将验证规则抽离成配置对象，让代理更通用。

function createValidatedObject(rules) {
  return new Proxy({}, {
    set(target, property, value) {
      const validator = rules[property];
      if (validator && !validator(value)) {
        throw new Error(`属性 ${property} 的值无效`);
      }
      target[property] = value;
      return true;
    }
  });
}

const user = createValidatedObject({
  email: (val) => typeof val === 'string' && val.includes('@'),
  age: (val) => Number.isInteger(val) && val >= 0 && val 


处理嵌套属性和只读字段
Proxy 默认只拦截顶层属性，若需验证嵌套对象，可递归代理或在验证函数中深入检查。
例如，在设置对象时对子属性也进行校验：

  
const person = new Proxy({}, {
  set(target, property, value) {
    if (property === 'address') {
      if (!value || typeof value !== 'object' || !value.city) {
        throw new Error('address 必须包含 city 字段');
      }
    }
    target[property] = value;
    return true;
  }
});

person.address = { city: 'Beijing' };  // 成功
// person.address = {};  // 抛错：缺少 city
  


基本上就这些。用 Proxy 做数据验证，灵活又透明，不影响正常操作的同时保障数据完整性。
以上就是《JavaScript代理实现数据验证方法》的详细内容，更多关于的资料请关注golang学习网公众号！