почему моя проверка пароля не работает при подключении к html-странице?

#javascript #html

#javascript #HTML

Вопрос:

Я создал страницу javascript и соединил ее с html-страницей. В Javascript я создал проверку пароля, и если есть несоответствие пароля, он предупредит о несоответствии.

 function validation()
{
    if(password==repassword){
        console.log(" ");
    }
    else{
        alert(" ");
    }
}
  

Приведенный выше код — это код javascript, а ниже — код html.

войти

     <label for="username">First Name: </label>
    <input class="firstname" type="text" id="firstname" placeholder="First name"><br>
    
    <label for="username">Last Name: </label>
    <input class="lastname" type="text" id="lastname" placeholder="Last name"><br>
    
    <label for="email">Email id: </label>
    <input class="email" type="email" id="email" placeholder="Email id"><br>
    
    <label for="labeltext">Password: </label>
    <input class="password" type="password" id="password" placeholder="Password" pattern="(?=.*d)(?=.*[a-z])(?=.*[A-Z]).{8,}"><br><br>
    
    <label for="labeltext">Re-Password: </label>
    <input class="Re-Password" type="password" id="repassword" placeholder="Re-Password" pattern="(?=.*d)(?=.*[a-z])(?=.*[A-Z]).{8,}"><br><br>

    <button class="Submit" onclick="validation()">Submit</button>
    <button class="reset">Reset</button>
</form>
  

Кто-нибудь знает, что не так в моем коде? Спасибо!

Комментарии:

1. пожалуйста, добавьте код формы также к вопросу.

Ответ №1:

Вы должны создать ссылку для каждого элемента в javascript:

 const password = document.getElementById('password');
const repassword = document.getElementById('repassword');
  

Теперь ваши переменные не являются локальными, и вы можете использовать их в своей функции:

 function validation()
{
    if(password.value==repassword.value){
        console.log(" ");
    }
    else{
        alert(" ");
    }
}
  

Ответ №2:

Я полагаю, что вы хотите проверить, соответствует ли пароль значению проверки пароля. Из ваших кодов javascript все выглядит хорошо, но если это не работает, то возникает проблема с вашими идентификаторами HTML-элементов, т.е. идентификатором поля пароля и идентификатором поля проверки пароля. Проверьте, не допустили ли вы ошибку в каком-либо коде, который вы используете для получения значений элементов.

Небольшая ошибка, например

 var x = document.getElementById("txtpass").value;
  

Где, как и в вашем HTML-источнике, нет такого элемента с txtpass, поскольку id может привести к сбою ваших кодов javascript.

Я бы посоветовал вам опубликовать полные коды HTML и Javascript.

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

Ответ №3:

Используйте name=password в своем пароле и name=repassword в своем теге repassword, например

 <input class="password" name="password" type="password" id="password" placeholder="Password" pattern="(?=.*d)(?=.*[a-z])(?=.*[A-Z]).{8,}"><br><br>