Member 12659327 Ответов: 1

Неправильное сообщение отображается после нажатия кнопки из текстового поля на моей веб-странице.


Я написал несколько функций, чтобы проверить, равны ли два пароля. Когда я нажимаю кнопку "Проверить пароль", она должна отображать либо" пароли совпадают", либо" пожалуйста, введите свой пароль еще раз, потому что два пароля не совпадают", в зависимости от того, равны ли пароли друг другу. Однако, когда я набираю два одинаковых пароля и нажимаю кнопку "Проверить пароль", появляется сообщение "пожалуйста, введите свой пароль еще раз, потому что два пароля не совпадают", хотя эти два пароля полностью идентичны. Что я здесь делаю не так?

Я использую password.js файл и a setpassword.html файл для этой веб-страницы.

Мой password.js файл есть:

var password1 = document.getElementById("txtPassword").value;
var verifypassword = document.getElementById("txtPWVerified").value;

var verifypasswordclick = document.getElementById("txtPWVerified");

function verifypassword1() {
    if(password1 == verifypassword && password1 != "" && verifypasword != "") {
        alert('The passwords match');
    }
    else if(password1 != verifypassword || password1 == "" || verifypasword == "") {
        alert("Please enter your password again because the two passwords don't match");
    }
}

verifypasswordclick.onblur = function() {
    verifypassword1;
};


Мой setpassword.html файл есть:

<!DOCTYPE html>
<!-- H5FormValidation.html -->
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Register Here</title>
</head>

<body>
  <h2>Register Here</h2>

  <form id="formTest" method="get" action="processData">
    <table>

    <tr>
      <td><label for="txtEmail">Email<span class="required">*</span></label></td>
      <td><input type="email" id="txtEmail" name="email" required></td>
    </tr>
    <tr>
      <td><label for="txtPassword">Password<span class="required">*</span></label></td>
      <td><input type="password" id="txtPassword" name="password" required></td>
    </tr>
    <tr>
      <td><label for="txtPWVerified">Verify Password<span class="required">*</span></label></td>
      <td><input type="password" id="txtPWVerified" name="pwVerified" required></td>
    </tr>

    <tr>
      <td> </td>
      <td>
          <input type="reset" value="CLEAR" id="btnReset"></td>
    </tr>
    </table>
  </form>
 <script src = "password.js"></script>
</body>
</html>


Что я уже пробовал:

Я пытался отладить его в течение 30 минут, но ничего не работает.

1 Ответов

Рейтинг:
1

Patrice T

попробуйте заменить

var password1 = document.getElementById("txtPassword").value;
var verifypassword = document.getElementById("txtPWVerified").value;
 
var verifypasswordclick = document.getElementById("txtPWVerified");
 
function verifypassword1() {
    if(password1 == verifypassword && password1 != "" && verifypasword != "") {
        alert('The passwords match');
    }
    else if(password1 != verifypassword || password1 == "" || verifypasword == "") {
        alert("Please enter your password again because the two passwords don't match");
    }
}
 
verifypasswordclick.onblur = function() {
    verifypassword1;
};

с чем-то вроде
function verifypassword1() {
    var password1 = document.getElementById("txtPassword").value;
    var verifypassword = document.getElementById("txtPWVerified").value;
 
    var verifypasswordclick = document.getElementById("txtPWVerified");
 
    if(password1 == verifypassword && password1 != "" && verifypasword != "") {
        alert('The passwords match');
    }
    else if(password1 != verifypassword || password1 == "" || verifypasword == "") {
        alert("Please enter your password again because the two passwords don't match");
    }
}
 
verifypasswordclick.onblur = function() {
    verifypassword1;
};

Ваша проблема заключается в том, что переменные, используемые для проверки пароля, отражают входные значения во время загрузки, а не входные значения во время проверки.

Совет: вы должны изучить реальное использование отладчика, потому что простая проверка значений переменных сказала бы вам, что не так.