JS代理数据验证技巧全解析

**JS代理实现数据验证方法详解：** 想要确保JavaScript应用的数据质量？本文深入解析如何利用JS代理（Proxy）实现强大的数据验证功能。通过`set`拦截器，我们可以拦截对象属性的写入操作，并根据预设的规则对属性值进行校验，例如类型检查、范围限制等。更进一步，我们将验证逻辑抽离成可复用的配置对象，实现动态验证规则，让你的数据验证更加灵活高效。掌握JS代理，让数据验证不再是难题，提升你的代码质量！

使用代理可实现数据写入时的验证，通过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 


<h3>处理嵌套属性和只读字段</h3>
<p>Proxy 默认只拦截顶层属性，若需验证嵌套对象，可递归代理或在验证函数中深入检查。</p>
<font>例如，在设置对象时对子属性也进行校验：</font>
<p>
  </p><pre class="brush:php;toolbar:false;">
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
  

理论要掌握，实操不能落！以上关于《JS代理数据验证技巧全解析》的详细介绍，大家都掌握了吧！如果想要继续提升自己的能力，那么就来关注golang学习网公众号吧！