自定义表单空值校验函数报错及返回值异常问题排查

问题根源 #

1. 错误计数类型不规范：初始代码中将errors定义为空字符串""，与数字相加会触发字符串拼接（比如"" + 1得到"1"），虽能勉强判断，但不符合计数的逻辑规范，易引发潜在问题。
2. 值传递导致变量不更新：JavaScript中数字属于基本类型，采用值传递传参。传入函数的errors是一个副本，函数内部修改的仅为这个副本，不会影响外部变量；同时你未将函数返回值赋值回外部errors，导致外部计数始终不变。

修正步骤与代码 #

1. 修正计数初始化 #

将let errors = "";改为let errors = 0;，用数字类型存储计数，避免字符串拼接问题。

2. 接收返回值更新计数 #

调用checkFormErrors时，必须将函数返回的更新后计数重新赋值给外部的errors，才能同步计数变化。

3. 优化校验函数（推荐） #

添加错误提示隐藏逻辑，避免上次的错误提示残留；用trim()处理输入空格，让空值校验更严谨。

完整修正代码

点击事件处理函数：

$("#addRecordSubmit").on("click", function(e) {
  e.preventDefault();
  // 初始化错误计数为数字0
  let errors = 0;

  let addobj = {
    addReference: $("#addReference").val(),
    addAccount: $("#addAccount").val(),
    addDescription: $("#addDescription").val(),
    // 其他需要校验的字段
  };

  // 每次调用函数都接收返回的更新后计数
  errors = checkFormErrors(addobj.addReference, "#addReferenceError", errors);
  errors = checkFormErrors(addobj.addAccount, "#addAccountError", errors);
  errors = checkFormErrors(addobj.addDescription, "#addDescriptionError", errors);
  // 其他字段的校验调用

  if (errors > 0) {
    return false;
  } else {
    // 执行表单提交逻辑
  }
});

校验函数：

function checkFormErrors(obj, errorMessage, errors) {
  // 先隐藏错误提示，避免残留
  $(errorMessage).hide();
  // 过滤输入空格，空字符串或全空格都判定为空
  if (obj.trim() === "") {
    $(errorMessage).show();
    errors += 1;
  }
  return errors;
}

进阶优化（减少重复代码） #

如果需要校验的字段较多，可将字段信息整理为数组，通过循环完成校验，避免重复调用函数：

$("#addRecordSubmit").on("click", function(e) {
  e.preventDefault();
  let errors = 0;

  let addobj = {
    addReference: $("#addReference").val(),
    addAccount: $("#addAccount").val(),
    addDescription: $("#addDescription").val(),
    // 其他字段
  };

  // 定义需要校验的字段映射数组
  const validationFields = [
    { value: addobj.addReference, errorEl: "#addReferenceError" },
    { value: addobj.addAccount, errorEl: "#addAccountError" },
    { value: addobj.addDescription, errorEl: "#addDescriptionError" },
    // 其他字段
  ];

  // 循环完成所有校验
  validationFields.forEach(item => {
    errors = checkFormErrors(item.value, item.errorEl, errors);
  });

  if (errors > 0) {
    return false;
  } else {
    // 提交处理
  }
});

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