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

2019年9月14日 184次阅读 来源: TANKING

如果用户名存在，则无提示
如果不存在，则提示并且禁用提交按钮

《Ajax+php验证登陆用户名是否存在》

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

本次登陆验证没有用数据库进行验证，而是用数组，用在项目上可以换成数据库。

    原文作者：TANKING
    原文地址: https://segmentfault.com/a/1190000014842077
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞