html表單驗證不起作用

我正在做一個html表單，我必須輸入用戶信息並提交。它將導航到php連接頁面。問題在於，我一直試圖在通過JavaScript提交之前驗證數據，但這並未發生。html表單驗證不起作用

下面我發佈HTML表單代碼。

<!DOCTYPE html> 
<html> 
<head> 
<script language = "JavaScript"> 
     function validate() 
     { 
      var username = document.getElementById("userName").value; 
      var password = document.getElementById("Password").value; 
      var repassword = document.getElementById("RePassword").value; 

      if (username.length < 0) { 
       alert("Please enter the username."); 
       return false; 
      } 
      if (password == null || password == "") { 
       alert("Please enter the password."); 
       return false; 
      } 
      if (repassword == null || repassword == "" || repassword != password) { 
       alert("Please enter the password."); 
       return false; 
      } 


     } 
</script> 

</head> 
<body> 
<form name="frmMr" action="send_post.php" method="post" onsubmit="return(validate());"> 
    User Name:<br> <input type="text" name="userName"><br> 
    Enter Password:<br> <input type="text" name="Password"><br> 
    Reenter Password:<br> <input type="text" name="RePassword"><br> 
    <input type="submit" > 
</form> 
<p id="error_para" ></p> 
</body> 
</html>

來源

2016-10-03 Animesh Jena

您的輸入字段沒有ID's，所以getElementById返回null。 – niandrei

你的HTML沒有id標籤，而在Javascript中使用的是getElementById('')

<!DOCTYPE html> 
<html> 
<head> 
// Changed the script syntax 
<script type="text/javascript"> 
    function validate() { 
     var username = document.getElementById("userName").value; 
     var password = document.getElementById("Password").value; 
     var repassword = document.getElementById("RePassword").value; 

     if (username.length <= 0) { 
      alert("Please enter the username."); 
      return false; 
     } 
     if (password == null || password == "") { 
      alert("Please enter the password."); 
      return false; 
     } 
     if (repassword == null || repassword == "" || repassword != password) { 
      // Changed Password message for testing 
      alert("Confirm Password empty or do not match."); 
      return false; 
     } 
    } 
</script> 
</head> 
<body> 
    <form name="frmMr" action="send_post.php" method="post" onsubmit="return(validate());"> 
     User Name:<br> <input type="text" id="userName" name="userName"><br> 
     Enter Password:<br> <input type="text" id="Password" name="Password"><br> 
     Reenter Password:<br> <input type="text" id="RePassword" name="RePassword"><br> 
     <!-- Added id="" attribute to above 3 lines --> 
     <input type="submit" > 
    </form> 
    <p id="error_para" ></p> 
</body> 
</html>

來源

2016-10-03 11:35:48 Aks1357

-2

最後，return true;在你的函數結束

來源

2016-10-03 11:22:59 scraaappy

我已經嘗試過，但結果相同。 –

這是他的方法中的一個錯誤的修復，但它不是他的問題的解決方案。 – Imaginaroom

你忘了ID添加到所有字段

<input type="text" name="userName" id="userName">

等等......

來源

2016-10-03 11:38:23

我也建議使用required屬性來輸入HTML5。

<input type="text" id="userName" name="userName" required>

這標誌着被要求（正如其名字），如果在它裏面沒有價值的形式，將不提交領域。

來源

2016-10-03 11:50:18 Imaginaroom

謝謝。必需是有用的，但在密碼匹配的情況下，你不能使用它。所以選擇了正常的驗證。 –

那麼，想想這樣，你仍然需要密碼和重新輸入密碼字段，所以使用html5功能。爲了匹配它們，你可以使用javascript。在Web開發中，儘可能多地實現安全級別總是一個好主意。在這種情況下，3，客戶端在HTML和JavaScript，一個在服務器端，以防萬一有人找到解決辦法。 – Imaginaroom

謝謝。我也加了他們。 –

html表單驗證不起作用

回答

相關問題