Question

我有一个html注册表单，我想检查Javascript中的密码和重新输入的密码是否相同。这是代码：

< script >
  function pass() {
    var pas = document.getElementById("pass");
    var rpas = document.getElementById("rpass");
    if (pas.value != rpas.value) {
      document.getElementById("error").innerHTML = "Enter same password in Retype Password..";
    } else {
      document.getElementById("error").innerHTML = "";
    }
  }


  <
  /script>

<form action="">
  <div id="signup" class="tab-content show">
    <input type="text" placeholder="Name" name="name" id="name" />
    <br />
    <br />
    <input type="password" placeholder="Password" name="pass" id="pass" />
    <br />
    <br />
    <input type="password" placeholder="ReType Password" name="rpass" id="rpass" />
    <br />
    <br />
    <input type="email" placeholder="Email" name="email" id="email" />
    <br />
    <br />
    <input type="radio" value="Male" name="gender" id="gender" checked="checked" />Male
    <input type="radio" value="FeMale" name="gender" id="gender" />Female
    <br />
    <br />
    <input type="submit" value="Submit" name="submit" id="submit" onclick="pass()" />
    <p id="error"></p>
  </div>
</form>

问题在于Javascript无法正常工作。

Answer 1

问题是您要在那里提交表单。您已经在提交按钮上使用过onClick事件，但是当按下提交按钮时，就提交了表单，您可以在onSubmit属性的表单标签中调用一个函数，然后必须停止表单提交，否则表单将被提交并且页面将被重新加载

Answer 2

您需要将输入类型“ submit”更改为输入type =“ button”。

<script >
function pass(){
	var pas = document.getElementById("pass");
	var rpas = document.getElementById("rpass"); 
if (pas.value != rpas.value){
	document.getElementById("error").innerHTML="Enter same password in Retype Password..";
	}
	else{
		document.getElementById("error").innerHTML="";
		}
}
	

</script>

<form action="">
<div id="signup" class="tab-content show">
<input type="text" placeholder="Name" name="name" id="name" />
<br />
<br />
<input type="password" placeholder="Password" name="pass" id="pass" />
<br />
<br />
<input type="password" placeholder="ReType Password" name="rpass" id="rpass" />
<br />
<br />
<input type="email" placeholder="Email" name="email" id="email" />
<br />
<br />
<input type="radio" value="Male" name="gender" id="gender" checked="checked"/>Male
<input type="radio" value="FeMale" name="gender" id="gender" />Female
<br />
<br />
<input type="button" value="Submit" name="submit" id="submit" onclick="pass()" />
<p id="error"></p>
 </div>
 </form>

您可以在W3schools

上查看以下代码

  <!DOCTYPE html>
    <html>
    <body>

    <h2>HTML Forms</h2>

    <form action="">
      First name:<br>
      <input type="text" name="firstname" value="Mickey">
      <br>
      Last name:<br>
      <input type="text" name="lastname" value="Mouse">
      <br><br>
      Password:<br>
      <input type="password" name="password" id="pswd">
      <br><br>
      Re-Password:<br>
      <input type="password" name="password" id="rpswd">
      <br><br>
      <input type="button" value="Submit" onclick="pass()">
    </form>

    <p>If you click the "Submit" button, the form-data will be sent to a page called "/action_page.php".</p>

    <script>
      function pass() {
        var paswd = document.getElementById("pswd").value;
        var rpswd = document.getElementById("rpswd").value;

        alert(paswd !== rpswd);
      }
    </script>

    </body>
    </html>

您也可以按照whis san的答案

检查Java脚本中的密码和重新输入的密码是否相同

2 个答案: