返回false不停止提交表單

我的用途：如果用戶字段和密碼字段爲空，我想停止表單提交。這是我正在嘗試的代碼：返回false不停止提交表單

<!DOCTYPE html> 
<html> 
<head> 
    <script> 
     function doit() { 

      var usr = document.getElementById('ur').value; 
      var psw = document.getElementById('pw').value; 

      if ((usr.trim() == '') && (psw.trim() == '')) { 
       alert("cannot Submit form"); 
       return false; 
      } 

     } 
    </script> 

</head> 


<body> 

    <form action="post.php" method="post" onsubmit="doit()"> 
     User: 
     <input type="text" id="ur" name="user"> 
     <br> 
     <br> Pass: 
     <input type="password" id="pw" name="pass"> 
     <br> 
     <br> 
     <button>Submit</button> 
    </form> 


</body> 
</html>

我正在學習JavaScript。如果您通過一些解釋爲什麼它不起作用來更正代碼將會很有幫助。

來源

2015-04-23 Asif Iqbal

加上'required' attri提交bute到你的輸入，在現代瀏覽器中，效果將是相同的。而在你的函數中，我會使用OR運算符，而不是AND - 兩個值都不應該爲空。 –

return false工作正常，你現在的樣子調用該函數是錯誤的。

<form action="post.php" method="post" onsubmit="doit()">

只是調用它，並不做任何處理的返回值

<form action="post.php" method="post" onsubmit="return doit()"> 
               ^

將停止在錯誤的返回值的形式郵寄。

閱讀MSDN本說明雖然它不是IE特定

您可以通過在事件處理程序返回false覆蓋此事件。使用此功能驗證客戶端上的數據以防止將無效數據提交給服務器。如果事件處理程序由表單對象的onsubmit屬性調用，那麼代碼必須使用返回函數明確請求返回值，並且事件處理程序必須爲事件處理函數中的每個可能的代碼路徑提供顯式返回值。

現在到另一個重要的點。

您的if條件只會在兩個字段都爲空時停止表單提交，而即使這兩個字段中的任何一個都爲空，它也應該這樣做。 &&（AND）應該是||（OR），並且在函數結束時如果沒有返回false，則return true。

來源

2015-04-23 07:11:31

關於*>事件處理函數必須爲事件處理函數中的每個可能的代碼路徑提供一個顯式的返回值* - 不要忘記在'doit（）的末尾添加'return true;'（或其他））'！ – Bob

@Bob - 在最後加入'return true'是沒有必要的，雖然它會很好，因爲它避免了在某些編輯器和皮棉檢查器中出現「並非所有路徑都返回值」警告。但是沒有它，代碼將正確運行。如果你在沒有'return'的情況下退出函數的末尾，函數將返回'undefined'，它與'false'的值不同。考慮事件處理程序的常見情況，它永遠不會返回「true」或「false」或任何值 - 這樣的函數將允許提交表單。你必須明確'返回false'來防止提交。 –

@MichaelGeary從字面上看，如果處理程序*必須*提供*顯式*返回值，那麼依靠隱式的'undefined'將不正確。在實踐中，根據HTML/ECMAScript規範（我沒有時間檢查），您所說的話可以在當前所有瀏覽器上運行，但如果我們要將MSDN文章在它的話，那麼明確的返回值是* required *。（雖然，這是MSDN和IE爲重點，它可能只是涵蓋VBS我知道的所有...） – Bob

onsubmit事件接受布爾值，因爲你沒有返回任何東西，所以它默認爲true。您需要在此事件中添加回報。

變化

onsubmit="doit()">

到

onsubmit="return doit()">

來源

2015-04-23 07:11:49

使用addEventListener上的preventDefault（）

document.form1.addEventListener("submit", function(event) { 
 

 
     var usr = document.getElementById('ur').value; 
 
     var psw = document.getElementById('pw').value; 
 

 
     if ((usr.trim() == '') || (psw.trim() == '')) { 
 
     alert("cannot Submit form"); 
 
     event.preventDefault(); 
 
     } else { 
 
     alert("submit"); 
 
     } 
 

 
    });

<form action="" method="post" name="form1"> 
 
    User: <input type="text" id="ur" name="user"><br><br> 
 
    Pass: <input type="password" id="pw" name="pass"><br><br> 
 
    <input type="submit" value="Submit" /> 
 
    </form>

來源

2017-12-19 09:49:07 antelove

返回false不停止提交表單

回答

相關問題