JS实现实时输入验证

当封装好一个实时输入的验证函数的时候，发现验证完成以后无法获得到结果，后续改为使用回调函数来获得值

function tipAlert(fields, Tip, regexs, msg, callback) {
  $(fields).on("input", function () {
    const fieldValue = $(fields).val();
    const $field = $(fields);
    const $tip = $(Tip);

    let isTrue = true;

    if (!regexs.test(fieldValue)) {
      // 如果匹配失败，设置边框颜色为红色
      $field.css("borderColor", "red");
      $tip.html(msg);
      isTrue = false;
    } else {
      // 如果输入合法，清除提示
      $field.css("borderColor", "");
      $tip.html("");
      isTrue = true;
    }

    // 如果字段为空，清除边框颜色和提示
    if (fieldValue === "") {
      $field.css("borderColor", "");
      $tip.html("");
      isTrue = false;
    }

    // 调用回调函数，传递验证结果
    if (callback && typeof callback === "function") {
      callback(isTrue); // 调用回调函数，传递isTrue
    }
  });
}

因为封装的函数复用性较差，于是将判断出来的结果全部存储在一个对象内，方便后续直接通过对象来操作

let validationState = {
  account: false, // 账户验证状态
  password: false, // 密码验证状态
};

使用callback来传递isTrue的值，即结果，随后直接在回调函数内部来进行得到结果后的操作

function callbacks(isTrue, field, btn, validationState) {
  // 更新字段验证状态
  validationState[field] = isTrue;
  // 默认所有验证状态都有效
  let allValid = true;
  for (let field in validationState) {
    if (validationState[field] !== true) {
      // 如果有任何字段无效，则设置为false
      allValid = false;
      //停止循环，减少性能消耗
      break;
    }
  }

  // 根据验证结果启用或禁用按钮
  if (allValid) {
    $(btn).attr("disabled", false); // 启用按钮
    $(btn).css("opacity", "1");
  } else {
    $(btn).attr("disabled", true); // 禁用按钮
    $(btn).css("opacity", "0.5");
  }
}

直接通过传入的参数来更改对象对应字段的值为回调函数传入的结果，同时声明一个变量作为开关，判断当对象内所有的键值内有一个不为true的时候，将开关关掉，否则开关不动，后续通过开关来开启或禁用按钮。

具体的使用示例如下：

tipAlert(
  "#account",
  ".Tips_account",
  /^(?:(?:\+|00)86)?1(?:(?:3[\d])|(?:4[5-79])|(?:5[0-35-9])|(?:6[5-7])|(?:7[0-8])|(?:8[\d])|(?:9[1589]))\d{8}$/,
  "账户格式不符合",
  function (isValid) {
// 更新账户验证状态
    validationState.account = isValid; 
// 更新按钮状态
    updateSubmitButtonState("#log_btn"); 
    callbacks(isValid, "account", "#log_btn", validationState);
  }
);

第一个为要检索的输入框，第二个为输入框提示词的位置，第三个为检索的条件，第四个为回调函数，传入第一个函数验证判断的结果，并更改对象内的值，同时禁用按钮，随后调用判断函数，判断是否可以解禁按钮。