JavaScript与jQuery实现用户登录验证

JavaScript与jQuery实现用户登录验证

在上一篇关于Ajax实现异步用户名验证的文章中，我们仅使用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交互部分与上一篇博文保持一致，未作改动。程序的最终运行效果如下图所示：

以上就是本文的全部内容，希望对各位的学习有所帮助。