验证用户名代码

最新推荐文章于 2024-07-22 11:11:36 发布

路人葵

最新推荐文章于 2024-07-22 11:11:36 发布

阅读量635

点赞数

前端代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>验证用户名是否存在</title>
    <script>
        window.onload = function () {
            var oInput = document.getElementById('username'),
                oNotice = document.getElementById('notice');
            oInput.onblur = function () {
                //第一步 创建XHR对象
                var xhr = null

                if(window.ActiveXObject){
                    xhr = new window.ActiveXObject();
                }else {
                    xhr = new XMLHttpRequest();
                }

                //第二步 请求配置
                xhr.open('POST','http://localhost/ajax/checkUserName.php');
                xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded')

                //第三步 发送
                xhr.send('username='+encodeURIComponent(this.value));//给this.value进行编码，防止遇上&符号导致用户名错误

                //第四步 等待接受结果
                xhr.onreadystatechange = function () {
                    if(xhr.readyState === 4 && xhr.status === 200){
                        if(xhr.responseText == 0){
                            oNotice.innerHTML = '该用户已经存在';
                        }else {
                            oNotice.innerHTML = '';
                        }
                    }
                }
            }
        }
    </script>
</head>
<body>
用户名：<input type="text" name="username" id="username"><b id="notice"></b>
</body>
</html>

后端PHP代码：

<?php
	header("Access-Control-Allow-Origin:*");
	$username=$_POST['username'];
	if($username == 'admin88'){
		echo 0;
	}else {
		echo 1;
	}
?>

路人葵

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
验证用户名代码

前端代码：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>验证用户名是否存在</title> <script> window.onload = function () {...
复制链接

扫一扫