一、核心技术

function createValidator(target, rules) {
    return new Proxy(target, {
        set(obj, prop, value) {
            const error = validate(prop, value, rules);
            if (error) throw new Error(error);
            obj[prop] = value;
            return true;
        }
    });
}

// 使用示例
const user = createValidator({}, {
    name: { required: true, minLength: 3 },
    age: { min: 18 }
});

二、完整案例

提交

const validator = {
username: { minLength: 4, maxLength: 20 },
age: { min: 18, max: 100 }
};

document.getElementById(‘userForm’).addEventListener(‘submit’, (e) => {
e.preventDefault();
const formData = new FormData(e.target);
const data = Object.fromEntries(formData);

try {
const validated = createValidator({}, validator);
Object.assign(validated, data);
alert(‘验证通过!’);
} catch (err) {
document.getElementById(‘errorOutput’).textContent = err.message;
}
});