Question

我想验证按下按钮时是否验证输入（如果为空）是否出现alert并集中在该input上，但是发生的情况是它是空的，alert出现了，但将我发送到另一页。

表格：

<html>

<head>
  <title>prueba</title>
</head>

<body>
  <form onsubmit="control()" action="https://stackoverflow.com">
    <input type="text" id="uname" placeholder="Ingrese usuario..." name="uname">
    <input type="password" placeholder="Ingrese contraseña..." name="psw">
    <button type="submit">Iniciar sesión</button>
  </form>

  <script>
    function control() {
      if (document.getElementById('uname') == "") {
        alert("El campo no puede estar vacío.");
        document.getElementById('uname').focus();
        return false;
      }
      return true;
    }
  </script>
</body>

</html>

该脚本不起作用，因为当我按下按钮并且输入文本为空时，这不会显示警报并将我重定向到页面。有什么不高兴吗？

Answer 1

将if语句更改为以下内容，以便您实际检查该字段的“值”是否为空。就目前而言，您正在检查DOMElement是否等于“”

   if (document.getElementById('uname').value == "") {

Answer 2

您也可以尝试此操作。这将逐字段检查onblur。

var validating = false; 
function control(element) {
  var id = element.id;

  var errors = {
      psw : 'enter password',
      uname : 'enter Username'
  };
if (document.getElementById(id).value === '') {
    if (id in errors) {
      if(validating == false) {
        validating = true
        alert(errors[id]);
        setTimeout(function(){
          document.getElementById(id).focus();
          validating = false;
        }, 1);
     }
    }
}
}

<html>
    <head>
        <title>prueba</title>
    </head>
    <body>
        <form action="https://stackoverflow.com" >
        <input id="uname" name="uname" value="" type="text" onblur="control(this)" autocomplete='off'>
        <input type="password" placeholder="Ingrese contraseña..." name="psw" id="psw" value=""  onblur="control(this)" autocomplete='off' >
                    <button type="submit">Iniciar sesión</button>
            </form>
    </body>
</html>

JavaScript验证输入无法正常工作

2 个答案: