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>

您的输入字段没有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>

答

最后，return true;在你的函数结束

我已经尝试过，但结果相同。 –

这是他的方法中的一个错误的修复，但它不是他的问题的解决方案。 – Imaginaroom

答

你忘了ID添加到所有字段

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

等等......

答

我也建议使用required属性来输入HTML5。

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

这标志着被要求（正如其名字），如果在它里面没有价值的形式，将不提交领域。

谢谢。必需是有用的，但在密码匹配的情况下，你不能使用它。所以选择了正常的验证。 –

那么，想想这样，你仍然需要密码和重新输入密码字段，所以使用html5功能。为了匹配它们，你可以使用javascript。在Web开发中，尽可能多地实现安全级别总是一个好主意。在这种情况下，3，客户端在HTML和JavaScript，一个在服务器端，以防万一有人找到解决办法。 – Imaginaroom

谢谢。我也加了他们。 –

html表单验证不起作用

相关推荐