如何制作帶有驗證的JavaScript表單，提交后不起作用

Question

<!DOCTYPE html>
<html>
<head>
<script>
function validateForm() {
    var x = document.forms["myForm"]["fname"].value;
    if (x == null || x == "") {
        alert("Name must be filled out");
        return false;
    }
}
</script>
</head>
<body>

<form name="myForm" action="demo_form.asp"
onsubmit="return validateForm()" method="post">
Name: <input type="text" name="fname">
<input type="submit" value="Submit">
</form>

</body>
</html>

我目前正在嘗試學習如何制作帶有驗證的JavaScript表單，並且當按下按鈕時，它只會提示用戶其表單已提交，並且實際上並沒有將表單發送到任何地方。

Answer 1

您需要使用Event.preventDefault()

您可以在此處了解更多信息。 在事件流的任何階段調用preventDefault將取消事件，這意味着實現通常不會由於事件而執行任何默認操作。

看到jsfiddle這里有兩個輸入框。 請注意<br>進行換行，將每個輸入框放在新行上。

<script>
function validateForm(e) {
       e.preventDefault();
        var x = document.forms["myForm"]["fname"].value;
        if (x == null || x == "") {
            alert("Name must be filled out");
            return false;
        }
    }
</script>

<body>
   <form name="myForm" action="demo_form.asp"
       onsubmit="return validateForm(event)" method="post">
       Name: <input type="text" name="fname"><br>
       New TextBox: <input type="text" name="textBox"><br>
      <input type="submit" value="Submit">
   </form>
</body>

Answer 2

如果在處理函數中具有事件對象的參數，則onclick事件將解析事件對象，因此您可以執行以下操作：

function validateForm(evt) {
//.preventDefault is a method of JavaScript events 
    evt.preventDefault();
}

因此，基本上，您可以在按下“提交”按鈕之前或之后添加邏輯，以進行客戶端驗證，並取消驗證失敗的事件，然后對用戶的脾氣暴躁而生氣。

如何制作帶有驗證的JavaScript表單，提交后不起作用

問題描述

2 個解決方案

解決方案1
2 已采納 2016-04-02 22:15:53

解決方案2
2 2016-04-02 22:17:36

如何制作帶有驗證的JavaScript表單，提交后不起作用

問題描述

2 個解決方案

解決方案1 2 已采納 2016-04-02 22:15:53

解決方案2 2 2016-04-02 22:17:36

解決方案1
2 已采納 2016-04-02 22:15:53

解決方案2
2 2016-04-02 22:17:36