您的位置:首页 > Web前端 > JQuery

javascript和jquery分别实现用户登录验证

2016-05-04 00:00 991 查看
在上一篇文章https://www.geek-share.com/detail/2673342959.html中,用javascript实现了用户验证,但并没有对密码进行验证,这次追加了这个功能,并分别用javascript和jquery实现。

一.用jquery的ajax实现的关键代码

实现如下

/*jquery实现
$(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("账号发生错误!")
},
});
});

$("#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("密码查询发生错误!")
},
});
});
}); */


二.用javascript实现的关键代码

实现如下

//javascript实现
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和数据库部分跟上篇博文的一样没有改变,运行结果如下图



以上就是本文的全部内容,希望对大家的学习有所帮助。

您可能感兴趣的文章:

jquery ajax 登录验证实现代码
jQuery.ajax 用户登录验证代码
ASP.NET jQuery 实例11 通过使用jQuery validation插件简单实现用户登录页面验证功能
S2SH整合JQuery+Ajax实现登录验证功能实现代码
HTML页面登录时的JS验证方法
jQuery+AJAX实现遮罩层登录验证界面(附源码)
Ajax异步方式实现登录与验证
PHP与Ajax相结合实现登录验证小Demo
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息