嘿，很高兴能帮到你！既然你提到表单验证里有一堆重复代码，咱们完全可以把这些重复的逻辑抽成一个通用函数，这样每个字段验证的时候直接调用就行，代码瞬间清爽很多～

先假设你原来的代码大概是这样（每个字段都重复写判断、提示错误的逻辑）：

$("#submitBtn").click(function(e) {
  e.preventDefault();
  let isValid = true;

  // 验证用户名
  const username = $("#username").val().trim();
  if (!username) {
    $("#usernameError").text("用户名不能为空");
    isValid = false;
  } else {
    $("#usernameError").text("");
  }

  // 验证邮箱
  const email = $("#email").val().trim();
  if (!email) {
    $("#emailError").text("邮箱不能为空");
    isValid = false;
  } else if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email)) {
    $("#emailError").text("请输入有效的邮箱地址");
    isValid = false;
  } else {
    $("#emailError").text("");
  }

  // 更多字段...重复的逻辑
  if (isValid) {
    // 提交Ajax请求
    $.ajax({
      url: "your-submit-url",
      method: "POST",
      data: $("form").serialize(),
      success: function(response) {
        // 处理成功
      }
    });
  }
});

第一步：抽离通用验证函数 #

我们把重复的「获取字段值、检查规则、更新错误提示、返回验证状态」这些逻辑，封装成一个通用函数：

// 通用字段验证函数
function validateField(fieldSelector, errorSelector, validationRules) {
  const fieldValue = $(fieldSelector).val().trim();
  let errorMessage = "";
  let isFieldValid = true;

  // 依次检查所有规则，只要有一个不通过就停止并设置错误
  for (const rule of validationRules) {
    if (!rule.test(fieldValue)) {
      errorMessage = rule.message;
      isFieldValid = false;
      break;
    }
  }

  // 更新错误提示文本
  $(errorSelector).text(errorMessage);
  return isFieldValid;
}

第二步：用通用函数重构验证逻辑 #

现在每个字段的验证只需要定义自己的规则和错误消息，调用通用函数即可：

$("#submitBtn").click(function(e) {
  e.preventDefault();
  let isValid = true;

  // 验证用户名：仅检查非空
  const usernameValid = validateField("#username", "#usernameError", [
    { test: val => val.length > 0, message: "用户名不能为空" }
  ]);
  isValid = isValid && usernameValid;

  // 验证邮箱：非空 + 格式校验
  const emailValid = validateField("#email", "#emailError", [
    { test: val => val.length > 0, message: "邮箱不能为空" },
    { test: val => /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(val), message: "请输入有效的邮箱地址" }
  ]);
  isValid = isValid && emailValid;

  // 验证密码：非空 + 长度至少6位
  const passwordValid = validateField("#password", "#passwordError", [
    { test: val => val.length > 0, message: "密码不能为空" },
    { test: val => val.length >= 6, message: "密码长度不能少于6位" }
  ]);
  isValid = isValid && passwordValid;

  // 所有字段验证通过，提交Ajax
  if (isValid) {
    $.ajax({
      url: "your-submit-url",
      method: "POST",
      data: $("form").serialize(),
      success: function(res) {
        console.log("提交成功！", res);
        // 这里可以添加成功后的处理，比如页面跳转或提示
      },
      error: function(err) {
        console.error("提交失败", err);
      }
    });
  }
});

进阶优化：用配置数组批量验证 #

如果字段很多，还可以把所有字段的验证配置做成一个数组，循环遍历验证，维护起来更方便：

// 定义所有字段的验证配置
const fieldValidations = [
  {
    field: "#username",
    error: "#usernameError",
    rules: [
      { test: val => val.length > 0, message: "用户名不能为空" }
    ]
  },
  {
    field: "#email",
    error: "#emailError",
    rules: [
      { test: val => val.length > 0, message: "邮箱不能为空" },
      { test: val => /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(val), message: "请输入有效的邮箱地址" }
    ]
  },
  {
    field: "#password",
    error: "#passwordError",
    rules: [
      { test: val => val.length > 0, message: "密码不能为空" },
      { test: val => val.length >= 6, message: "密码长度不能少于6位" }
    ]
  }
];

// 提交按钮点击事件
$("#submitBtn").click(function(e) {
  e.preventDefault();
  let isValid = true;

  // 循环验证每个字段
  fieldValidations.forEach(validation => {
    const fieldIsValid = validateField(validation.field, validation.error, validation.rules);
    isValid = isValid && fieldIsValid;
  });

  if (isValid) {
    // 提交Ajax请求
    $.ajax({
      // 你的Ajax配置
    });
  }
});

这样之后要新增字段验证，只需要在fieldValidations数组里加一个配置对象就行，完全不用改核心验证逻辑，超省心！

如果需要实时验证（比如用户输入时就检查），也可以基于这个函数扩展，比如给字段绑定input事件：

// 给每个字段绑定实时验证
fieldValidations.forEach(validation => {
  $(validation.field).on("input", function() {
    validateField(validation.field, validation.error, validation.rules);
  });
});

这样用户输入的时候就能实时看到错误提示啦～

内容的提问来源于stack exchange，提问作者Dominic.tech