Блог

Главная - Вопросы по программированию - Создание «простого» поля проверки пароля

Создание «простого» поля проверки пароля

#javascript #forms #passwords #if-statement

#javascript #формы #пароли #if-оператор

Вопрос:

Я пытаюсь создать поле пароля для веб-страницы. Пока у меня есть:

 <form name="PasswordField" action="">
Password:
<input type="password" name="password">
<input type="button" value="Log in">
</form>

Жалкий, я знаю. Это не обязательно должно быть необычным, мне просто нужно, чтобы «получить» пароль из текстового поля и сопоставить его с паролем для страницы. Я предполагаю, что могу использовать if-else?

 *Code for get password from textbox when the "Log in" button is pressed here*
if (password = "rawr")
{alert('Correct!')}
else
{alert('Wrong Password')}

К сожалению, я дурачился с этим уже несколько часов. Я тоже пробовал функции, и это, похоже, тоже не сработало (для меня).

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

1. Вы должны заглянуть в регулярное выражение, и у вас есть ошибка в вашем скрипте, должно быть password == "rawr" с двойным знаком равенства

2. регулярные выражения @ibu?? Нет, в этом нет необходимости.

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

4. Вы не можете проверить свой пароль с помощью javascript на своей странице и сохранить какой-либо уровень безопасности, потому что все JS видны любому, кто хочет посмотреть. Если вы хотите безопасности, вы должны проверить пароль с сервера.

5. @jfriend00 Он пометил это домашнее задание, поэтому я думаю, что это просто обучающий пример форм, а не реальный сайт.

Ответ №1:

Если вы пойдете по этому пути, вам нужно поместить проверку внутри функции, которая вызывается в onclick случае нажатия вашей кнопки. Кроме того, чтобы получить доступ к <input узлу паролей в js, вы можете присвоить ему id значение и использовать document.getElementById(id) . Кроме того, = это оператор присваивания. Используйте == для сравнения 🙂

 <head>
<script type="text/javascript">
function isValid(){
var password = document.getElementById('password').value;
if (password == "rawr")
{alert('Correct!')}
else
{alert('Wrong Password')}
}
</script>
</head>

<form name="PasswordField" action="">
Password:
<input type="password" id="password" name="password">
<input type="button" value="Log in" onclick="isValid();">
</form>

Или еще более простым способом было бы передать узел password DOM в качестве аргумента функции:

 <head>
<script type="text/javascript">
function isValid(myNode){
var password = myNode.value;
if (password == "rawr")
{alert('Correct!')}
else
{alert('Wrong Password')}
}
</script>
</head>

<form name="PasswordField" action="">
Password:
<input type="password" id="password" name="password">
<input type="button" value="Log in" onclick="isValid(this);">
</form>

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

1. и то, и другое сработало великолепно. Спасибо! можно ли переместить сценарий в заголовке в любое другое место документа?

2. @JoshI Np! В этом нет необходимости, но обычно / традиционно вы помещаете определения функций js в <head> тег. Если вам нужно запустить js вне функции, вам нужно разместить ее соответствующим образом

3. @Shredder Я не думаю, что вам следовало давать такой полный ответ на вопрос, помеченный как домашнее задание. Подсказка, да. Но не полный ответ.

Ответ №2:

Это то, что вы ищете?

 document.forms['PasswordField'].elements['password'].value

Ответ №3:

Я использовал jquery, и вот мое решение:

 <html>
<head>
    <script type="text/javascript" src="jquery-1.4.4.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function() {
            $("input[name='login']").click(function() {
                var s = $("input[name='password']").val();

                if(s == "rawr") {alert('Correct!')}
                else {alert('Wrong Password')}
            });
        });
    </script>

</head>

<body>
    <form name="PasswordField" action="">
    Password:<input type="password" name="password">
        <input type="button" value="Log in" name="login">
    </form>
</body>

</html>
Метки: