表单name输入框验证失效，alert无法弹出问题求助

问题描述 #

对表单的name输入框（id为nombre）做简单验证，但无法触发alert提示，附上HTML和JavaScript代码请求排查：

HTML代码 #

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="./style.css">
    <title>Proyecto Poker</title>
</head>
<body>
    <form action=""  id="form">
        <div class="form">
            <h1>FORMULARIO DE REGISTRO</h1>
            <div class="grupo">
                <input type="text" name="" placeholder="Name" id="nombre"><span class="barra"></span>
            </div>
            <div class="grupo">
                <input type="text" name="" placeholder="Apellido" id="apellido"><span class="barra"></span>
            </div>
            <div class="grupo">
                <input type="number" name="" placeholder="Edad" id="edad"><span class="barra"></span>
            </div>
            <div class="grupo">
                <input type="email" name="" placeholder="Email" id="email"><span class="barra"></span>
            </div>
            <div class="grupo">
                <input type="password" name="password" placeholder="Password" id="password"><span class="barra" ></span>   
            </div>
            <button type="submit">Registrarse</button>
        </div>
    </form>

    <script src="./main.js"></script>
</body>
</html>

JavaScript代码 #

document.getElementById('form').addEventListener('submit', (e) => {
    e.preventDefault();


    let nombre = document.getElementById('nombre').value;
    let apellido = document.getElementById('apellido').value;
    let edad = document.getElementById('edad').value;
    let email = document.getElementById('email').value;
    let password = document.getElementById('passsword');

    let expRegNombre = /^\s+$/;

    if(nombre == null || nombre.lenght == 0 || expRegNombre.test(nombre)){
        alert('nombre invalido')
    }
})

问题排查与修复 #

你的代码里有两个关键错误导致alert无法触发：

1. 拼写错误：lenght → length
   代码中nombre.lenght == 0是拼写错误，正确的字符串长度属性名是length（少了字母t）。这个错误会导致该条件永远不成立，直接破坏了判断逻辑。

2. 正则表达式覆盖范围优化（可选）
   当前正则/^\s+$/仅匹配全部是空白字符且至少有一个的情况，若用户输入空字符串（什么都不填），只能靠nombre.length == 0覆盖。如果想同时匹配空字符串和全空白的情况，可以把正则改成/^\s*$/（*表示零个或多个），这样能合并条件，简化判断：

   if(/^\s*$/.test(nombre)){
       alert('nombre invalido')
   }
   

3. 额外拼写错误（不影响当前验证，但建议修复）
   代码中let password = document.getElementById('passsword');里的id拼写错误，应该是password（多了一个s），后续若要验证密码会受影响。

修复后的JavaScript代码 #

document.getElementById('form').addEventListener('submit', (e) => {
    e.preventDefault();

    let nombre = document.getElementById('nombre').value;
    let expRegNombre = /^\s*$/;

    if(expRegNombre.test(nombre)){
        alert('nombre invalido')
    }
})

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