JavaScript匹配表单输入id与数组对象id仅匹配最后一项问题排查

问题原因 #

• 代码的核心问题是onfocus事件被重复覆盖：遍历errorMsg数组时，每一轮都会调用formElements函数，而这个函数会给所有.form-control输入框重新赋值onfocus回调。第一轮传fname时绑定的判断逻辑会被第二轮传lname的逻辑完全覆盖，最终所有输入框的焦点事件只会判断是否等于lname，因此只有最后一个输入框能匹配成功打印true。
• 额外HTML语法问题：lname输入框外层多写了一个多余的闭合div标签，建议修正。

修复方案 #

调整逻辑，只给所有输入框绑定一次焦点事件，直接判断当前输入框的id是否存在于errorMsg数组中即可，修复后的代码如下：

修复后JS代码 #

let items = document.querySelectorAll('.form-control');
let errorMsg = [
  {
    'id': 'fname',
    'msg': 'first name is required'
  },
  {
    'id': 'lname',
    'msg': 'last name is required'
  }
];
// 提前提取所有需要校验的id，简化后续判断逻辑
let validIds = errorMsg.map(item => item.id);

// 仅绑定一次焦点事件即可
items.forEach(input => {
  input.onfocus = function(e) {
    console.log(validIds.includes(e.target.id));
    // 如果需要获取对应错误提示，可使用下面的代码
    // let currentMsg = errorMsg.find(item => item.id === e.target.id)
  }
});

修正后HTML代码 #

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

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