首页 - 技术栈

PHP+Ajax实现简单的表单验证

作者: 五速梦信息网
时间: 2026年03月19日 18:00

PHP+Ajax实现简单的表单验证

Ajax入门级别的表单验证：比如输入用户名，重复的话会自动弹出不可用的标识。

可以知道基本的步骤就是下图

1、创建一个对象XMLHttpRequest

 var xhr=new XMLHttpRequest();

2、连接到服务器

 xhr.open('get/post','文件名',true/false);

第一個看是什麽方式提交數據：get/post;

第二個是看服務器所讀的文件名；

第三個看是否異步傳輸；如我這裏：xhr.open('get','./ajax.php',true)

3、发送请求

 xhr.send();

4、数据返回

xhr.onreadystatechange=function () {
if(this.readyState==4){
alert('请求结束了');
//接受后台相应内容
alert('内容是'+this.responseText);
}
}

存有 XMLHttpRequest 的状态。从 0 到 4 发生变化。

0: 请求未初始化

1: 服务器连接已建立

2: 请求已接收

3: 请求处理中

4: 请求已完成，且响应已就绪

好了介绍完基本的东西：下面开始实例操作！！！

---------------------

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>ajax</title>
</head>
<body>
<form action="" method="post">
    用户名：<input type="text" name="username"><span id="reg"></span></p>
    
Email：<input type="text" name="email"></p>
    <input type="submit" value="注册"></p>
</form>
</body>
<script>
    var user=document.getElementsByName('username')[0];
    user.onblur=function () {
        //alert(this.value);
        var url='./04.php?data='+this.value;
        //alert(url);
        var reg=document.getElementById('reg');
var xhr=new XMLHttpRequest();
        xhr.onreadystatechange =function () {
            if(this.readyState==4){
                //alert('请求成功');
                if(this.responseText==1){
                    reg.innerHTML='<font color="green">可用</font>'
                }else {
                    reg.innerHTML='<font color="red">不可用</font>'
                }
            }
        }
        xhr.open('get',url,true);
        xhr.send(null);
    }
</script>
</html>
对应的PHP文件里面写的如下：
<?php
/**
 * Created by PhpStorm.
 * User: Puppet Angel
 * Date: 2018/10/19
 * Time: 10:16
 */
$data=$_GET['data'];
//$sql='select 
$users=array('帅哥','美女','野兽');
echo in_array($data,$users)?0:1;</code></pre>