javascript - 如何发现 JavaScript 中的表单验证不起作用

Question

<script>
  function validate() {
    var username = document.getElememtById("uname");
    var password = document.getElememtById("pass");

    if (username.value == "" || password.value == "") {
      alert("no data");
    }
  }
</script>


<form>
  <input id="uname" type="text" placeholder="username"></input>

  <input id="pass" type="password" placeholder="password"></input>

  <button onclick="validate()" type="submit">Submit</button>
</form>

Answer 1

使用e.preventDefault防止默认行为，并且getElememtById中也存在拼写错误

function validate(e) {
  e.preventDefault();
  var username = document.getElementById("uname");
  var password = document.getElementById("pass");

  if (username.value == "" || password.value == "") {
    alert("no data");
  }
}

<form>
  <input id="uname" type="text" placeholder="username" />

  <input id="pass" type="password" placeholder="password" />

  <button button type='submit' onclick="validate(event)" type="submit">Submit</button>
</form>