快捷導(dǎo)航

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

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

這篇文章主要為大家詳細(xì)介紹了javascript和jquery分別實現(xiàn)用戶登錄驗證的方法，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下

在上一篇文章Ajax實現(xiàn)異步用戶名驗證功能中，用javascript實現(xiàn)了用戶驗證，但并沒有對密碼進行驗證，這次追加了這個功能，并分別用javascript和jquery實現(xiàn)。

一.用jquery的ajax實現(xiàn)的關(guā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)的關(guā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)容，希望對大家的學(xué)習(xí)有所幫助。

您可能感興趣的文章:

相關(guān)文章

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