[英]jQuery password login form
I'm trying to create a very simple (No need for it to be 'safe') page with a login box. 我正在尝试使用登录框创建一个非常简单的(不需要它是'安全')页面。
When the user enters a password, I want the button to go to a certain URL. 当用户输入密码时,我希望按钮转到某个URL。 If the password is incorrect, it should display an alert.
如果密码不正确,则应显示警告。
This is my code so far; 到目前为止这是我的代码;
$(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>
What I expect my code to do: Put a click function on .login
to check if : password is equal to 'hello' then go to a URL (used an alert for testing purpose) or else : alert a message. 我希望我的代码做的:把点击功能上
.login
检查 :密码等于“你好”,然后去一个URL(用于测试目的的警报), 或者 :提醒消息。
Issues I'm having: No current response to the button at all. 我遇到的问题:根本没有对按钮的当前响应。 If enter is pressed after filling in the field, the page reloads.
如果在填写字段后按Enter键,页面将重新加载。 I want my user to be able to trigger the button with the enter key as well, is this possible?
我希望我的用户能够使用回车键触发按钮,这可能吗?
I'm loading the script in before I end my body, and calling on the library in my head. 在我结束我的身体之前,我正在加载脚本,并且在我脑海中调用库。
You're missing }else{
, and for the enter you can use keyup()
and detect the key that is pressed using event.keyCode
to trigger the click of the .login
button: 你错过了
}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>
For the redirect to an url
you can use window.location.href = 'your url goes here';
要重定向到
url
您可以使用window.location.href = 'your url goes here';
Basically the problem is you are missing {
brace.Because of this your code doesn't work.Try the below code 基本上问题是你缺少
{
brace.Because,因为你的代码不起作用。尝试下面的代码
$(document).ready(function() {
$('.login').click(function() {
if ($('input:password').val() == "hello") {
alert('Right Password!');
} else {
alert('Wrong Password!');
}
});
});
If enter is pressed after filling in the field, the page reloads.
如果在填写字段后按Enter键,页面将重新加载。
The page reloads on clicking the enter key, as the form
is submitted - you can disable that using this: 在提交
form
,单击enter键会重新加载页面 - 您可以使用以下命令禁用该页面:
$("form").submit(function(event) {
event.preventDefault();
});
(Note that in snippet , due to restrictions you can't check form
submit) (请注意,在代码段中 , 由于限制,您无法检查
form
提交)
To listen for the enter key as well, you can use this: 要同时监听回车键,您可以使用:
$('input:password').keyup(function(event) {
if (event.keyCode == 13) {
$('.login').click(); // trigger click
}
});
See demo below: 见下面的演示:
$(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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.