JS与HTML表单验证问题：数组前三项账号密码无法匹配

核心问题 #

你的代码里，for循环的逻辑是关键bug：

• 循环从数组最后一位（i=3，对应用户Luis）开始遍历
• 只要第一次判断不匹配（比如输入Ruben和1234），就直接执行else里的alert('Datos incorrectos')并break终止循环，根本不会去检查前面的用户
• 另外，空字段验证的else分支只会提示"Campos llenos :)"，但不管空字段判断结果如何，后续的验证循环都会执行，逻辑不连贯

修复后的代码 #

JavaScript部分 #

function validar() {
  var nombre = document.Formulario.nombre.value.trim();
  var password = document.Formulario.password.value.trim();
  var indice = document.Formulario.rol.value;
  var users = ['Ruben', 'Juan', 'Pedro', 'Luis'];
  var pass = ['1234', 'admin', 'abcd', 'password'];
  
  // 先处理空字段，不通过则直接终止函数
  if (nombre === '' || password === '' || indice === '0') {
    alert("Faltan campos por llenar");
    return;
  }

  let isAuthenticated = false;
  // 正向遍历所有用户
  for (let i = 0; i < users.length; i++) {
    if (nombre === users[i] && password === pass[i]) {
      alert('Bienvenido ' + nombre);
      isAuthenticated = true;
      break;
    }
  }

  // 遍历完所有用户都没匹配，才提示错误
  if (!isAuthenticated) {
    alert('Datos incorrectos');
  }
}

HTML部分（无需修改） #

<form name="Formulario" method="get" action="recibe.php">
  <input type="text" name="nombre" id="nombre" placeholder="Usuario"><br>
  <input type="text" name="password" id="password" placeholder="Password"><br>
  <select name="rol" id="rol">
    <option value="0">Selecciona</option>
    <option value="1">Gerente</option>
    <option value="2">Ejecutivo</option>
  </select><br>
  <input onclick="validar(); return false;" type="submit" value="Enviar">
</form>

优化建议（可选） #

把用户和密码合并成对象数组，代码可读性更高：

// 替换原来的users和pass数组
var userList = [
  {name: 'Ruben', pass: '1234'},
  {name: 'Juan', pass: 'admin'},
  {name: 'Pedro', pass: 'abcd'},
  {name: 'Luis', pass: 'password'}
];

// 循环部分改为：
for (let user of userList) {
  if (nombre === user.name && password === user.pass) {
    alert('Bienvenido ' + nombre);
    isAuthenticated = true;
    break;
  }
}

内容的提问来源于stack exchange，提问作者CARLOS EDUARDO LOMELI FLORES