Javascript函数未修改html

Javascript function not modifying html

本文关键字：html 未修改 函数 Javascript      更新时间：2023-09-26

我有一个Javascript函数的问题。它应该使用if语句来检查表单中的两个输入框是否具有相同的值。

HTML:

<form action="confirm_account.php" method="post" id="form" onsubmit="checkpassword()">
<p style="font-family:latine;">Password: <input type="password" name="password" id="password" style="font-family:latine;" required>
</p>
<br><br>
<p style="font-family:latine;">Re-enter Password: <input type="password" name="password-reenter" id="password-reenter" style="font-family:latine;" required> </p>
<span id="password-warning" style="color:red; font-weight:bold;"></span>

Javascript：

var password = document.getElementById("password").value;
var password2 = document.getElementById("password-reenter").value;
function checkpassword(){
   if('password' == 'password2'){
       document.getElementById("form").action = "confirm_account.php";
       document.getElementById("password-warning").innerHTML = "";
}
  else{
    document.getElementById("password-warning").innerHTML = "The passwords do not match, please re-enter the password.";
    document.getElementById("form").onsubmit = "return false";
}
};

此时会显示警告消息，但onsubmit未被修改。

试试这个，它应该可以工作：

function checkpassword() {
  var password = document.getElementById("password").value;
  var password2 = document.getElementById("password-reenter").value;
  if (password === password2) {
    document.getElementById("form").action = "confirm_account.php";
    document.getElementById("password-warning").innerHTML = "";
    document.getElementById("password-success").innerHTML = "The passwords match! Well done!";
  } else {
    document.getElementById("password-warning").innerHTML = "The passwords do not match, please re-enter the password.";
    document.getElementById("password-success").innerHTML = "";
    document.getElementById("password-reenter").focus();
    return false;
  }
}
<form action="#" method="post" id="form" onsubmit="return checkpassword()">
  <p style="font-family:latine;">Password:
    <input type="password" name="password" id="password" style="font-family:latine;" required>
  </p>
  <br>
  <p style="font-family:latine;">Re-enter Password:
    <input type="password" name="password-reenter" id="password-reenter" style="font-family:latine;" required>
  </p>
  <p>
    <span id="password-success" style="color:green;"></span>
    <span id="password-warning" style="color:red; "></span>
    <input type="submit" name="btnSave" value="Try it">
</form>

var password = document.getElementById("password").value;
var password2 = document.getElementById("password-reenter").value;

在if条件下，您不是在检查password和password2，而是在检查字符串。

应该是

 if(password === password2){

而onsubmit是一个事件，你不能给它分配字符串。因为你在表单的onsubmit中调用checkpassword。为了防止表单提交，只需要return false。

var password = document.getElementById("password").value;
var password2 = document.getElementById("password-reenter").value;
function checkpassword(){
   if(password === password2){
       document.getElementById("password-warning").innerHTML = "";
   }
  else{
    document.getElementById("password-warning").innerHTML = "The passwords do not match, please re-enter the password.";
    return false;
  }
};
相关文章：