javascript和jquery實現(xiàn)用戶登錄驗證

更新時間：2022年03月25日 10:39:02 作者：尼阿卡

這篇文章主要為大家詳細介紹了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ù)庫部分跟上篇博文的一樣沒有改變，運行結果如下圖

以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助。

您可能感興趣的文章:

Javascript作用域和作用域鏈原理解析
這篇文章主要介紹了Javascript作用域和作用域鏈原理解析,文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下
2020-03-03
通過循環(huán)優(yōu)化 JavaScript 程序
這篇文章主要介紹了通過循環(huán)優(yōu)化 JavaScript 程序，對于提高 JavaScript 程序的性能這個問題，最簡單同時也是很容易被忽視的方法就是學習如何正確編寫高性能循環(huán)語句。下面我們來學習一下吧
2019-06-06
純js封裝的ajax功能函數(shù)與用法示例
這篇文章主要介紹了純js封裝的ajax功能函數(shù)與用法,結合實例形式分析了基于JavaScript封裝的ajax功能函數(shù)定義及與php后臺交互相關操作技巧,需要的朋友可以參考下
2018-05-05
taro開發(fā)微信小程序的實踐
這篇文章主要介紹了taro開發(fā)微信小程序的實踐，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧
2019-05-05
在TypeScript中泛型的使用方法及場景
泛型是TypeScript中的一個強大特性,它可以增加代碼的靈活性和安全性,在本文中,我將向您介紹泛型的使用方法和場景,并展示如何使用類型約束,需要的朋友可以參考下
2023-08-08
javascript實現(xiàn)異形滾動輪播
這篇文章主要為大家詳細介紹了javascript實現(xiàn)異形滾動輪播，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2019-11-11
基于JavaScript實現(xiàn)前端文件的斷點續(xù)傳
這篇文章主要介紹了基于JavaScript實現(xiàn)前端文件的斷點續(xù)傳的相關資料,需要的朋友可以參考下
2016-10-10
JavaScript中的this指向綁定規(guī)則及常見面試總結
這篇文章主要為大家介紹了JavaScript中的this指向綁定規(guī)則及箭頭韓碩中的this指向,還b包含了常見面試總結,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪
2023-12-12
使用Fuse.js實現(xiàn)高效的模糊搜索功能
在現(xiàn)代?Web?應用程序中,實現(xiàn)高效的搜索功能是至關重要的,Fuse.js?是一個強大的?JavaScript?庫,它提供了靈活的模糊搜索和文本匹配功能,使您能夠輕松實現(xiàn)出色的搜索體驗,文中代碼示例講解的非常詳細,需要的朋友可以參考下
2024-01-01
JS自定義打印及靜默打印的實現(xiàn)方法
在瀏覽器上打印應該一個比較常見的操作, 最簡單的打印方式就是直接點擊瀏覽器右上角,找到“打印”按鈕或者調(diào)用window.print(), 然而,實際情況下大多數(shù)需求都不會如此簡單,所以本文給大家介紹了使用JS自定義打印及靜默打印的方法實現(xiàn),需要的朋友可以參考下
2024-01-01