Ajax+php驗證登陸使用者名稱是否存在
阿新 • • 發佈：2019-01-07
如果使用者名稱存在，則無提示
如果不存在，則提示並且禁用提交按鈕
login.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>使用者登入</title> </head> <body> <div align="center"> <h3>使用者登入</h3> <form action="check.php" method="post"> <p>帳號: <input type="text" name="name" id="name"></p> <span id="warning" style="color:red"></span> <p>密碼: <input type="password" name="password" id="password"></p> <p><input type="submit" id="submit" value="提交"></p> <p id="tips"></p> </form> </div> </body> <script> var user = document.getElementById('name'); //獲取使用者控制元件 user.onblur = function () { //當用戶離開當前文字框的時行驗證 //1.建立Ajax物件 var xhr = new XMLHttpRequest(); //2.建立請求事件的監聽 xhr.onreadystatechange = function () { if (xhr.readyState == 4 && xhr.status == 200) { if (xhr.responseText == 0) { //當前使用者不存在 var warning = document.getElementById('warning'); warning.innerHTML = '新使用者,請先註冊再登入~~'; document.getElementById('submit').disabled = true; } } } //3.初始化一個url請求 var user = document.getElementById('name').value; var password = document.getElementById('password').value; var data = 'name='+user+'&password='+password; //生成post請求資料 var url = 'check.php'; xhr.open('post',url,true); //請求型別為post，互動方式為非同步 //4.設定請求頭 xhr.setRequestHeader('content-type','application/x-www-form-urlencoded'); //5.傳送url請求,需要傳入引數 xhr.send(data); var submit = document.getElementById('submit'); submit.onclick = function () { var tips = document.getElementById('tips'); tips.innerHTML = '驗證通過,正在跳轉中~~'; return false; } } </script> </html>
check.php
<?php
$userList = ['peter', 'jack', 'mike']; //已註冊使用者列表
$user = isset($_POST['name']) ? $_POST['name'] : '';
echo in_array($user, $userList) ? 1 : 0; //如果使用者名稱不在列表中返回0,否則返回1