如何解决JavaScript实现HTML表单keyup与submit双场景校验提交异常问题

现有代码存在的问题 #

• 实时校验绑定的是input事件，不符合需求要求的keyup触发条件
• 两个长度校验函数checkFirstName、checkLastName内部定义的valid变量是局部变量，没有对外返回，校验结果无法被外部逻辑复用
• 提交校验逻辑仅判断了输入框是否为空，没有同步校验长度是否符合≥5的要求，导致不符合长度规则的表单也会被提交
• 全局变量form没有加声明关键字，存在变量污染风险

优化后的代码 #

JavaScript代码 #

const fname = document.getElementById('fname');
const lname = document.getElementById('lname');
const form = document.querySelector('#myForm'); // 补充变量声明

// 校验函数增加返回值，方便外部获取校验结果
function checkFirstName() {
  let valid = true;
  if (fname.value.length < 5) {
    console.log('first name must be greater than 5');
    valid = false;
  }
  return valid;
}

function checkLastName() {
  let valid = true;
  if (lname.value.length < 5) {
    console.log('last name must be greater than 5');
    valid = false;
  }
  return valid;
}

// 把input事件改为keyup，符合需求触发条件
form.addEventListener('keyup', function(e) {
  switch (e.target.id) {
    case 'fname':
      checkFirstName();
      break;
    case 'lname':
      checkLastName();
      break;
  }
});

form.addEventListener('submit', function(e) {
  let isFormValid = true;
  // 先判断是否为空
  if (fname.value === '') {
    console.log('first name is required');
    isFormValid = false;
  }
  if (lname.value === '') {
    console.log('last name is required');
    isFormValid = false;
  }
  // 复用校验函数判断长度是否符合要求
  if (!checkFirstName() || !checkLastName()) {
    isFormValid = false;
  }
  // 任意校验不通过就阻止提交
  if (!isFormValid) {
    e.preventDefault();
    return false;
  }
});

HTML代码 #

原有HTML仅存在两个small标签id重复、换行标签写法不规范的小问题，优化后如下：

<form method="get" id="myForm">
  <div>
    <input type="text" class="form-control" id="fname" name="fname"><br>
    <small class="small" id="fnameTip"></small>
  </div>
  <div>
    <input type="text" class="form-control" id="lname" name="lname"><br>
    <small class="small" id="lnameTip"></small>
  </div>
  <button type="submit" name="send">submit</button>
</form>

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