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

时间 2019-12-06

标签 ajax+php ajax php 验证登录用户名是否存在栏目 Ajax 繁體版

原文原文链接

若是用户名存在，则无提示
若是不存在，则提示而且禁用提交按钮php

<!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

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