jQuery toggle（）和自動刷新/渲染
[英]JQuery toggle() and auto refresh/rendering
問題描述
附上我的代碼片段。 我希望實現最簡單的身份驗證機制。 有兩個輸入字段， user和password 。 單擊發送按鈕時，將調用verify（）函數，該函數檢查用戶名和密碼是否均為“ admin ”，如果保留，則顯示isCorrect div，否則顯示isWrong 。
謝謝！
test.html
<html>
<head>
<link rel="stylesheet" type="text/css" href="test.css"/>
<script src="jquery-1.7.js"></script>
<script src="test.js"></script>
</head>
<body>
<form class="header">
Username: <input type="textbox" tabindex="1" id="username"/>
Password: <input type="password" tabindex="2" id="password"/>
<input type="submit" value="Send" tabindex="3" id="send" onclick="verify()"/>
</form>
<div id="isCorrect">correct!</div>
<div id="isWrong">wrong!</div>
</body>
</html>
test.css
#isCorrect { display: none; }
#isWrong { display: none; }
test.js
function verify() {
var username = $("#username").val();
var password = $("#password").val();
if (username == "admin" && password == "admin")
$("#isCorrect").toggle();
else
$("#isWrong").toggle();
}
3 個解決方案
解決方案1
1 2011-11-22 14:47:00
如果頁面刷新，則可以使用jQuery阻止默認事件，在輸入的情況下應該提交
jQuery("#send").click(function(e){
var username = $("#username").val();
var password = $("#password").val();
e.preventDefault();
if (username == "admin" && password == "admin")
$("#isCorrect").toggle();
else
$("#isWrong").toggle();
});
如果仍然要使用驗證，則可以執行以下操作：
<input type="submit" value="Send" tabindex="3" id="send"/>
jQuery("#send").click(verify); //this binds the event
function verify(e) {
e.preventDefault(); //this prevents the submit event
//your code
}
另外，如果您想捕獲提交而不是單擊輸入，請檢查Dunhamzzzs的答案，他說的很對。
解決方案2
0 已采納 2011-11-22 14:47:09
首先，如@Dunhamzzz所指出-這是非常不安全的，因為您的用戶名和密碼在瀏覽器中是可見的....
如果要讓用戶在屏幕上查看消息，則需要return false;否則， return false; 到您的verify（）函數的末尾：
function verify() {
$("#isCorrect").hide();
$("#isWrong").hide();
var username = $("#username").val();
var password = $("#password").val();
if (username == "admin" && password == "admin")
$("#isCorrect").show();
else
$("#isWrong").show();
return false;
}
然后更新您的html：
<input type="submit" value="Send" tabindex="3" id="send" onclick="return verify()"/>
工作示例： http : //jsfiddle.net/manseuk/ZyN93/
解決方案3
0 2011-11-22 15:02:13
Nicos答案具有邏輯上的正確性，但是不要在提交按鈕上添加click事件，因為在用戶使用jQuery表單時，當用戶按下Enter鍵時它不會觸發（此外，無論如何這些天您都不應這樣做）您可以將提交處理程序添加到整個表單中，如下所示：
$('form.header').submit(function(e) {
e.preventDefault(); // This stops the form actually submitting
var username = $("#username").val();
var password = $("#password").val();
if (username == "admin" && password == "admin")
$("#isCorrect").toggle();
else
$("#isWrong").toggle();
});
Javascript 自動刷新切換復選框
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.