如何使用jQuery为输入字段动态批量绑定自定义验证函数？

你当前的写法确实会因为字段增多导致代码冗余，核心问题是重复编写了结构一致的验证、清除函数和事件绑定。可以通过配置化管理验证规则+通用初始化函数的方式来彻底解决这个问题，具体实现如下：

1. 定义统一的验证配置 #

把每个需要验证的字段的选择器、验证规则、错误信息都放在一个配置数组里，新增字段时只需要添加新的配置项即可：

// 所有需要验证的字段配置
const fieldValidations = [
  {
    selector: "#foo",
    // 验证规则：返回true表示通过，false表示失败
    validate: function(value) {
      return value !== "-1";
    },
    errorMessage: "Please choose one of the options."
  },
  {
    selector: "#bar",
    validate: function(value) {
      // 示例：验证输入内容不为空
      return value.trim().length > 0;
    },
    errorMessage: "This field cannot be empty."
  },
  {
    selector: "#email",
    validate: function(value) {
      // 示例：简单的邮箱格式验证
      return /^[^@\s]+@[^@\s]+\.[^@\s]+$/.test(value);
    },
    errorMessage: "Please enter a valid email address."
  }
];

2. 编写通用的初始化函数 #

通过遍历配置数组，自动为每个字段绑定事件、处理验证和清除错误的逻辑：

function initCustomValidations() {
  fieldValidations.forEach(item => {
    const $field = $(item.selector);
    const nativeField = $field[0];

    // 失去焦点时执行验证
    $field.on("focusout", function() {
      const value = $(this).val();
      if (!item.validate(value)) {
        nativeField.setCustomValidity(item.errorMessage);
      } else {
        nativeField.setCustomValidity("");
      }
    });

    // 获得焦点时清除错误提示
    $field.on("focus", function() {
      nativeField.setCustomValidity("");
    });
  });

  // 表单提交时强制验证所有目标字段（防止用户直接提交跳过focusout）
  $("form").on("submit", function() {
    let isFormValid = true;
    fieldValidations.forEach(item => {
      const $field = $(item.selector);
      const nativeField = $field[0];
      const value = $field.val();
      
      if (!item.validate(value)) {
        nativeField.setCustomValidity(item.errorMessage);
        isFormValid = false;
      } else {
        nativeField.setCustomValidity("");
      }
    });
    return isFormValid;
  });
}

// 页面加载完成后初始化验证
$(document).ready(function() {
  initCustomValidations();
});

方案优势 #

• 零冗余代码：新增验证字段只需在配置数组中添加一项，无需重复编写函数和事件绑定
• 逻辑集中：所有验证规则和错误信息统一管理，便于维护和修改
• 覆盖场景全面：既处理了字段交互时的验证，也覆盖了用户直接提交表单的场景
• 灵活性高：验证规则支持自定义函数，可以实现任意复杂的校验逻辑

内容的提问来源于stack exchange，提问作者fat penguin