Javascript 验证表单问题

Question

我正在使用 javascript 创建一个简单的验证表单，但我的代码存在问题。我有一个用户名和密码输入字段。我想要的是，当我提交表单时，如果其中一个字段为空，则不将表单发送到数据库，而是停留在页面上，并显示输入旁边的跨度，上面写着“请填写此字段”。我该如何解决这个问题？

谢谢。

HTML代码:

<form action="#" method="post">
    <label for="username">Username</label>
    <input type="text" id="username" name="username">
    <span id="userspan">please fill in this field</span>

    <br>

    <label for="userpassword">Password</label>
    <input type="password" id="userpassword" name="userpassword">

    <br>

    <input type="submit" id="usersubmit" onsubmit="myFunction();">
</form> 

CSS 代码:

#userspan {
    display:none;
}

Javascript:

var username = document.getElementById("username").value;
var userpassword = document.getElementById("userpassword").value;
var userspan = document.getElementById("userspan");
var var usersubmit = document.getElementById("usersubmit");


function myFunction() {
    if ( username == "" || userpassword == "" ) {
        userspan.style.display="block";
        return false;
    }else {
        return true;
    }
}

Answer 1

修改提交输入框为:

    <input type="button" id="usersubmit" onclick="myFunction();">

并在 return true 声明之前添加到 myFunction() 声明的末尾。

    document.getElemenById("username").form.submit();

... 原因是因为 submit 输入按钮无论如何都会提交表单，如果你使用 button 输入类型，它不会提交表单，然后您可以控制何时从 myFunction()

中提交表单

代码中还有:

var var usersubmit = document.getElementById("usersubmit");

上面写着 var var usersubmit

Javascript 示例:

<script>
  function myFunction() {
    var username = document.getElementById("username").value;
    var userpassword = document.getElementById("userpassword").value;
    if ((username == "") || (userpassword == "")) {
      userspan.style.display = "block";
      return false;
    } else {
      document.getElementById("username").form.submit();
      return true;
    }
  }
</script>
<form action="#" method="post">
  <label for="username">Username</label>
  <input type="text" id="username" name="username">
  <span id="userspan">please fill in this field</span>

  <br>

  <label for="userpassword">Password</label>
  <input type="password" id="userpassword" name="userpassword">

  <br>

  <input type="button" id="usersubmit" onclick="myFunction();" value="submit">
</form>

另一种不使用任何 javascript 的方法:

  <form action="#" method="post">
      <label for="username">Username</label>
      <input type="text" id="username" name="username" required>
      <span id="userspan">please fill in this field</span>

      <br>

      <label for="userpassword">Password</label>
      <input type="password" id="userpassword" name="userpassword" required>

      <br>

      <input type="submit" id="usersubmit" >
    </form>