找回密码
 立即注册

QQ登录

只需一步,快速开始

[php] Ajax+php验证登陆用户名是否存在

[复制链接]
查看: 487|回复: 0
最佳答案
0 

51

主题

181

帖子

5105

积分

S1

积分
5105
 楼主| 发表于 2018-5-13 23:05:12 | 显示全部楼层 |阅读模式
如果用户名存在,则无提示
如果不存在,则提示并且禁用提交按钮


3448590353-5af852cc43647_articlex.png
login.html
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>用户登录</title>
  6. </head>
  7. <body>
  8. <div align="center">
  9.     <h3>用户登录</h3>
  10.     <form action="check.php" method="post">
  11.         <p>帐号: <input type="text" name="name" id="name"></p>
  12.         <span id="warning" style="color:red"></span>
  13.         <p>密码: <input type="password" name="password" id="password"></p>
  14.         <p><input type="submit" id="submit" value="提交"></p>
  15.         <p id="tips"></p>
  16.     </form>
  17. </div>
  18. </body>
  19. <script>
  20.     var user = document.getElementById('name');  //获取用户控件
  21.     user.onblur = function () {  //当用户离开当前文本框的时行验证
  22.         //1.创建Ajax对象
  23.         var xhr = new XMLHttpRequest();
  24.         //2.创建请求事件的监听
  25.         xhr.onreadystatechange = function () {
  26.             if (xhr.readyState == 4 && xhr.status == 200) {
  27.                 if (xhr.responseText == 0) {  //当前用户不存在
  28.                     var warning = document.getElementById('warning');
  29.                     warning.innerHTML = '新用户,请先注册再登录~~';
  30.                     document.getElementById('submit').disabled = true;
  31.                 }
  32.             }
  33.         }

  34.         //3.初始化一个url请求
  35.         var user = document.getElementById('name').value;
  36.         var password = document.getElementById('password').value;
  37.         var data = 'name='+user+'&password='+password; //生成post请求数据
  38.         var url = 'check.php';
  39.         xhr.open('post',url,true); //请求类型为post,交互方式为异步

  40.         //4.设置请求头
  41.         xhr.setRequestHeader('content-type','application/x-www-form-urlencoded');

  42.         //5.发送url请求,需要传入参数
  43.         xhr.send(data);

  44.         var submit = document.getElementById('submit');
  45.         submit.onclick = function () {
  46.             var tips = document.getElementById('tips');
  47.             tips.innerHTML = '验证通过,正在跳转中~~';
  48.             return false;
  49.         }
  50.     }
  51. </script>
  52. </html>
复制代码
check.php
  1. <?php
  2. $userList = ['peter', 'jack', 'mike'];  //已注册用户列表
  3. $user = isset($_POST['name']) ? $_POST['name'] : '';
  4. echo in_array($user, $userList) ? 1 : 0;  //如果用户名不在列表中返回0,否则返回1
复制代码
本次登陆验证没有用数据库进行验证,而是用数组,用在项目上可以换成数据库。
回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则



www.henkuai.com—微信开发者的分享交流平台,专注微信开发生态。

天津市滨海新区
中新生态城中成大道生态建设公寓9号楼3层301

微信公众号

广告推广
QQ:805874290

市场合作
zhongcong@henkuai.com