Question

好的，所以在我问我的问题或发布任何代码之前，我将解释我要做什么。

我正在使用Windows 10和XAMPP。我正在尝试创建一个主要由HTML和PHP组成的注册表单，但是我认为让浏览器检查用户选择的密码和确认密码是否匹配才更有意义，甚至可以将其提交给服务器，而不是提交给服务器。在后端使用PHP进行相同的操作。

为此，我决定使用一个简单的JS代码。

我试图将密码字段和确认字段中写入的文本绑定到两个变量，然后使用是否检查它们是否匹配的方法，即使我故意输入错误的确认信息，表单也会提交。

我尝试使用google chrome控制台找出原因。事实证明，我用于密码和确认的变量始终等于“”，并且由于“” =“”，因此表单始终提交。

当我在控制台中输入“ btn”时，它会向我显示正确的HTML元素，这意味着DOM在JS之前加载，因此也可以在HTML表单之后编写js代码。 >

我还注意到在控制台中键入“ password.value”时，它总是正确显示我在该字段中写的内容。

是因为我将所有这些写在php文件中吗？如果是这样，我如何混合JS和PHP以防止出现此问题。我将在此处发布表单和js代码。

编辑：我知道我的问题有点含糊，所以我需要进行此编辑，我知道我并没有停止脚本，所以无论如何表单都必须提交，但是我必须得到警报，因为我故意输入密码并确认不要不匹配！

var btn = document.getElementById('3');
btn.addEventListener('click' , function(){
  var pa = document.getElementById('password').value; 
  var co = document.getElementById('confirm').value;
  if(pa !== co)
  {
    alert("password and confirmation must match!");
  }
 });

<form method="post">
  <label for="email">Please enter your valid email address:</label> 
  <input type="email" name="email" placeholder="enter your email address" required> 
  <br> 
  <br> 
  <label for="password">Please choose a password:</label> 
  <input type="password" name ="password" placeholder="enter your password" required id="pass"> 
  <br> 
  <br> 
  <label for="confirm">Please confirm your password:</label> 
  <input type="password" name="confirm" placeholder="confirm your password" required id="conf"> 
  <br> 
  <label for="agreement">by registering on this website i agree to the <a href="#">terms and conditions!</a></label>
  <input type="checkbox" name="agreement" id=""> 
  <br> 
  <input type="submit" value="Sign Up!" id="3"> 
</form>

在这段代码中，为什么“ document.getElementById（）。value”始终等于“”？

0 个答案: