JS中return false失效时如何聚焦首个错误输入框

我明白你的困扰——现在的验证逻辑会在每发现一个错误就立刻聚焦到该字段，导致最后一个错误字段抢走了焦点，而你希望用户第一眼看到的是第一个出现错误的字段对吧？

问题出在你当前的代码逻辑里：每一个错误字段都会执行$('#name').focus()（或对应字段的focus），后面的focus操作会覆盖前面的，所以最终焦点落在最后一个错误上。而你尝试的return false和preventDefault()之所以没用，是因为它们只能终止当前的代码分支，没法阻止后续字段的验证流程继续执行，后面的字段还是会触发focus。

修复方案：只给第一个错误字段设置焦点 #

我们可以新增一个变量来标记是否已经给某个错误字段设置过焦点，只有在第一次遇到错误时才执行focus操作，后续错误不再处理焦点。

具体步骤：

• 在验证函数的最开头，定义一个变量let hasFocusedFirstError = false;，用来记录是否已经聚焦过首个错误。
• 在每个字段的错误判断逻辑里，先检查这个变量：如果还没聚焦过错误，再执行focus，并把变量设为true。

修改后的代码示例 #

下面是针对你姓名字段的修改，其他字段可以套用同样的逻辑：

// 验证函数开头新增这个变量
let hasFocusedFirstError = false;
let error = false; // 假设这是全局的错误标记

const name = $('#name').val().trim();
if (name.length < 1) {
  $('#name_error').text(NAME_ERROR);
  // 只在第一次错误时设置焦点
  if (!hasFocusedFirstError) {
    $('#name').focus();
    hasFocusedFirstError = true;
  }
  error = true;
} else {
  const regEx = /^[A-Za-z ]+$/;
  const validName = regEx.test(name);
  if (!validName) {
    $('#name_error').text(INVALID_NAME_ERROR);
    // 同样判断是否已聚焦过首个错误
    if (!hasFocusedFirstError) {
      $('#name').focus();
      hasFocusedFirstError = true;
    }
    error = true;
  } else {
    $('#name_error').text('');
  }
}

// 其他字段的验证逻辑也照此修改...

这样一来，第一个出现错误的字段会被聚焦，后续的错误字段不会再覆盖这个焦点，完美解决你的问题～

内容的提问来源于stack exchange，提问作者Manvendra Singh