javascript和jquery實現(xiàn)用戶登錄驗證
在上一篇文章Ajax實現(xiàn)異步用戶名驗證功能中,用javascript實現(xiàn)了用戶驗證,但并沒有對密碼進行驗證,這次追加了這個功能,并分別用javascript和jquery實現(xiàn)。
一.用jquery的ajax實現(xiàn)的關鍵代碼
實現(xiàn)如下
/*jquery實現(xiàn)
$(document).ready(function(){
$("#account").blur(function(event) {
$.ajax({
type:"GET",
url:"checkAccount.php?account="+$("#account").val(),
dataTypes:"text",
success:function(msg){
$("#accountStatus").html(msg);
},
error:function(jqXHR) {
alert("賬號發(fā)生錯誤!")
},
});
});
$("#password").blur(function(event) {
$.ajax({
type:"GET",
url:"checkPassword.php?",
dataTypes:"text",
data:"account="+$("#account").val()+"&password="+$("#password").val(),
success:function(msg){
$("#passwordStatus").html(msg);
},
error:function(jqXHR) {
alert("密碼查詢發(fā)生錯誤!")
},
});
});
}); */二.用javascript實現(xiàn)的關鍵代碼
實現(xiàn)如下
//javascript實現(xiàn)
function checkAccount(){
var xmlhttp;
var name = document.getElementById("account").value;
if (window.XMLHttpRequest)
xmlhttp=new XMLHttpRequest();
else
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
xmlhttp.open("GET","checkAccount.php?account="+name,true);
xmlhttp.send();
xmlhttp.onreadystatechange=function(){
if (xmlhttp.readyState==4 && xmlhttp.status==200)
document.getElementById("accountStatus").innerHTML=xmlhttp.responseText;
}
}
function checkPassword(){
var xmlhttp;
var name = document.getElementById("account").value;
var pw = document.getElementById("password").value;
if (window.XMLHttpRequest)
xmlhttp=new XMLHttpRequest();
else
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
xmlhttp.open("GET","checkPassword.php?account="+name+"&password="+pw,true);
xmlhttp.send();
xmlhttp.onreadystatechange=function(){
if (xmlhttp.readyState==4 && xmlhttp.status==200)
document.getElementById("passwordStatus").innerHTML=xmlhttp.responseText;
}
}mysql和數(shù)據(jù)庫部分跟上篇博文的一樣沒有改變,運行結(jié)果如下圖

以上就是本文的全部內(nèi)容,希望對大家的學習有所幫助。
相關文章
JS網(wǎng)絡游戲-(模擬城市webgame)提供的一些例子下載
JS網(wǎng)絡游戲-(模擬城市webgame)提供的一些例子下載...2007-10-10
TypeScript?中使用?getter?和?setter的方法
這篇文章主要介紹了TypeScript?中如何使用?getter?和?setter,?getter使我們能夠?qū)傩越壎ǖ皆谠L問屬性時調(diào)用的函數(shù),而?setter?將屬性綁定到在嘗試設置屬性時調(diào)用的函數(shù),需要的朋友可以參考下2023-04-04
JS+CSS實現(xiàn)類似QQ好友及黑名單效果的樹型菜單
這篇文章主要介紹了JS+CSS實現(xiàn)類似QQ好友及黑名單效果的樹型菜單,涉及JavaScript結(jié)合鼠標事件針對頁面元素CSS樣式的動態(tài)操作技巧,非常簡單實用,需要的朋友可以參考下2015-09-09
JavaScript forEach 方法跳出循環(huán)的操作方法
這篇文章主要介紹了JavaScript forEach 方法跳出循環(huán)的操作方法,本文通過實例代碼給大家介紹的非常詳細,對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下2024-01-01

