Форма входа в систему jQuery

Question

Я пытаюсь создать очень простую (не нужно, чтобы она была «безопасной») страницей с полем для входа.

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

Это мой код;

$(document).ready(function() { 
 
    $('.login').click(function() { 
 
    if ($('input:password').val() == "hello") { 
 
     alert('Right Password!'); 
 
    else 
 
     alert('Wrong Password!'); 
 
    } 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<form> 
 
    <input type="password" id="password" /> 
 
    <input type="button" class="login" value="Continue" /> 
 
</form>

Что я ожидаю мой код, чтобы сделать: Поместите функцию щелчка на .login проверить если: пароль равно «привет» затем перейти к URL (используется предупреждение для целей тестирования) или еще: предупредить сообщение.

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

Я загружаю сценарий прежде, чем закончу свое тело, и позвоню в библиотеку в моей голове.

Answer 1

Вы упускаете }else{, и для ввода можно использовать keyup() и обнаружить ключ, прессованные с использованием event.keyCode, чтобы вызвать щелчок кнопки .login:

$(document).ready(function() { 
 
    $('.login').click(function() { 
 
    if ($('input:password').val() == "hello") { 
 
     alert('Right Password!'); 
 
    } else { 
 
     alert('Wrong Password!'); 
 
    } 
 
    }); 
 
    $('input:password').keyup(function(event) { 
 
    event.preventDefault(); 
 
    if (event.keyCode == 13) { 
 
     $('.login').click(); 
 
    } 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<form> 
 
    <input type="password" id="password" /> 
 
    <input type="button" class="login" value="Continue" /> 
 
</form>

Для перенаправление на url вы можете использовать window.location.href = 'your url goes here';

Answer 2

Basicall У проблемы есть вам не хватает { brace.Because этого кода не work.Try приведенный ниже код

$(document).ready(function() { 
    $('.login').click(function() { 
    if ($('input:password').val() == "hello") { 
     alert('Right Password!'); 
    } else { 
     alert('Wrong Password!'); 
    } 
    }); 
}); 

Answer 3

Если ввести нажимается после заполнения поля, страница перезагружается.

В страница перезагружается на нажав клавишу ввода, так как form является представлен - вы можете отключить, что с помощью этого:

$("form").submit(function(event) { 
    event.preventDefault(); 
}); 

(Обратите внимание, что в сниппета, из-за ограничений вы не можете проверить form Отправить)

Чтобы слушать для клавиши ввода, а также, вы можете использовать это:

$('input:password').keyup(function(event) { 
    if (event.keyCode == 13) { 
    $('.login').click(); // trigger click 
    } 
}); 

Смотреть демо ниже:

$(document).ready(function() { 
 

 
    // this prevents page reload on pressing enter 
 
    $("form").submit(function(event) { 
 
    event.preventDefault(); 
 
    }); 
 

 
    // click listener 
 
    $('.login').click(function() { 
 
    if ($('input:password').val() == "hello") { 
 
     alert('Right Password!'); 
 
    } else { 
 
     alert('Wrong Password!'); 
 
    } 
 
    }); 
 

 
    // respond to enter key 
 
    $('input:password').keyup(function(event) { 
 
    if (event.keyCode == 13) { 
 
     $('.login').click(); // trigger click 
 
    } 
 
    }); 
 

 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<form> 
 
    <input type="password" id="password" /> 
 
    <input type="button" class="login" value="Continue" /> 
 
</form>