如何将正则表达式作为参数传入自定义校验函数实现表单字段校验？

• regexValidator 调用时未绑定正确的this指向：直接调用regexValidator(pattern)时，函数内部的this不会指向对应表单输入字段，无法读取到目标字段的value值，导致校验逻辑失效。
• 未实现多字段适配逻辑：现有写法只能固定校验单个字段，无法满足传入不同正则、校验不同字段的需求。

以下是可直接使用的优化后代码，支持多字段传入不同正则规则完成校验：

// 提前配置各字段对应的正则规则，新增校验字段时只需在此处加配置即可
const validateRules = {
  // 用户名校验规则
  username: /^[A-Za-zÁ-Úá-ú\s]{3,15}$/,
  // 可自行扩展更多规则，如手机号、邮箱等
  phone: /^1[3-9]\d{9}$/,
  email: /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/
}

send.addEventListener("click", function (event) {
  // 获取需要校验的输入框DOM元素
  const nameInput = document.querySelector('#username');
  const phoneInput = document.querySelector('#phone');

  // 调用通用校验函数传入对应元素和规则
  const nameIsValid = regexValidator(nameInput, validateRules.username);
  const phoneIsValid = regexValidator(phoneInput, validateRules.phone);

  // 所有字段校验通过才允许提交
  if (nameIsValid && phoneIsValid) {
    return true;
  } else {
    event.preventDefault();
    return false;
  }
});

/**
 * 通用正则校验函数
 * @param {HTMLElement} inputEl 待校验的输入框DOM元素
 * @param {RegExp} pattern 对应字段的校验正则
 * @returns {Boolean} 校验是否通过
 */
function regexValidator(inputEl, pattern) {
  // 自动去除首尾空白字符后再校验，省略冗余if判断直接返回结果
  return pattern.test(inputEl.value.trim());
}

核心改动说明 #

• 把待校验的输入元素作为参数传入校验函数，彻底避免this指向混乱的问题，支持任意输入字段传入校验。
• 抽离正则规则为单独配置项，扩展校验字段时不需要修改核心校验逻辑，维护更方便。
• 简化校验逻辑写法，去除冗余的条件判断代码。

如果需要批量绑定字段校验，也可以用闭包实现预绑定正则的校验器，调用更灵活：

// 生成绑定了指定正则的专属校验函数
function createRegexValidator(pattern) {
  return function(inputEl) {
    return pattern.test(inputEl.value.trim());
  }
}

// 预生成各字段的校验器，使用时直接传输入框即可
const validateName = createRegexValidator(/^[A-Za-zÁ-Úá-ú\s]{3,15}$/);
const validateEmail = createRegexValidator(/^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/);

// 调用示例
console.log(validateName(document.querySelector('#username')));
console.log(validateEmail(document.querySelector('#email')));

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