如何利用JavaScript的Proxy实现自动表单验证，以及它如何实时拦截输入并显示错误反馈？

function createValidationProxy(target, validator) {
  return new Proxy(target, {
    set: function(obj, prop, value) {
      if (validator[prop] && !validator[prop](value)) {
        // 验证失败，显示错误信息
        displayError(prop, validator[prop].message);
        return false; // 阻止属性更新
      } else {
        // 验证通过，清除错误信息
        clearError(prop);
        obj[prop] = value;
        return true; // 允许属性更新
      }
    }
  });
}

// 示例：验证器对象
const formValidator = {
  username: {
    rule: (value) => value.length >= 5,
    message: "用户名长度至少为5个字符"
  },
  email: {
    rule: (value) => /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(value),
    message: "邮箱格式不正确"
  }
};

// 模拟表单对象
const formData = {};

// 创建 Proxy 实例
const validatedForm = createValidationProxy(formData, {
    username: (value) => value.length >= 5,
    email: (value) => /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(value),
    usernameMessage: "用户名长度至少为5个字符",
    emailMessage: "邮箱格式不正确"
});

// 模拟用户输入
validatedForm.username = "test"; // 验证失败，显示错误
validatedForm.username = "testing"; // 验证通过
validatedForm.email = "invalid-email"; // 验证失败，显示错误
validatedForm.email = "valid@email.com"; // 验证通过

function displayError(field, message) {
  console.error(`字段 ${field} 验证失败: ${message}`);
  // 实际应用中，这里应该更新 DOM，显示错误信息
}

function clearError(field) {
  console.log(`字段 ${field} 验证通过`);
  // 实际应用中，这里应该清除 DOM 中的错误信息
}

formData

formValidator

set

false

displayError

input

change

formValidator

set

const formValidator = {
  password: (value) => value.length >= 8,
  confirmPassword: (value) => value === validatedForm.password, // 依赖 password 字段
  passwordMessage: "密码长度至少为8个字符",
  confirmPasswordMessage: "两次密码不一致"
};

set

async/await

set

const formValidator = {
  username: async (value) => {
    const response = await fetch(`/api/check-username?username=${value}`);
    const data = await response.json();
    return !data.exists; // 如果用户名不存在，则验证通过
  },
  usernameMessage: "用户名已存在"
};