用 proxy 的 set 拦截器校验赋值，在写入前拒绝不符合规则的值。合法赋值交给 reflect.set()，并把它的布尔结果返回给调用方。

给表单数量添加整数约束

在控制台创建代理。数量只接受 1 至 99 的整数。

const original = { quantity: 1 };
const form = new Proxy(original, {
    set(target, key, value, receiver) {
        if (key === "quantity" &&
            (!Number.isInteger(value) || value < 1 || value > 99)) {
            throw new RangeError("quantity must be an integer from 1 to 99");
        }
        return Reflect.set(target, key, value, receiver);
    }
});

拦截器只对经由 form 的操作生效。其他字段沿用普通对象的赋值行为。

验证失败时旧值保持原样

先写合法值，再尝试写入字符串。

JavaScript 开发专家

掌握包含 ES6+、异步模式和 Node.js API 的现代 JavaScript。处理 Promise、事件循环和浏览器/Node 兼容性。在 JavaSc

下载

立即学习“Java免费学习笔记（深入）”；

form.quantity = 3;
try {
    form.quantity = "4";
} catch (error) {
    console.log(error.name);
}
console.log(form.quantity);

依次看到 RangeError 和 3。浏览器输入框通常提供字符串，可在提交边界按约定解析。

在输入边界显式转换

下面限制输入为一或两位且不以零开头的数字，再交给代理。

function assignQuantity(input) {
    if (!/^[1-9]\d?$/.test(input)) {
        throw new Error("数量格式错误");
    }
    form.quantity = Number(input);
}
assignQuantity("12");
console.assert(form.quantity === 12);

直接修改 original 或修改某个嵌套对象不会自动经过这个拦截器。提交到服务端时仍要验证数量。