使用 HTML5 校验表单并使用 AJAX 发送数据-html教程-PHP中文网

使用 HTML5 校验表单并使用 AJAX 发送数据

花韻仙語

发布： 2025-10-01 13:38:01

原创

594人浏览过

使用 html5 校验表单并使用 ajax 发送数据

本文档旨在指导开发者如何利用 HTML5 内置的表单验证功能，在客户端完成表单校验，并在校验通过后，使用 AJAX 技术将表单数据以 JSON 格式发送到服务器。通过示例代码，详细讲解 reportValidity() 方法的使用以及如何结合 AJAX 实现表单数据的提交。

HTML5 表单校验

HTML5 引入了内置的表单验证功能，极大地简化了前端校验的复杂度。通过在 input 标签中添加 required 属性，可以指定该字段为必填项。浏览器会自动检查这些字段，并在用户尝试提交表单时，阻止提交并显示相应的错误提示。

使用 reportValidity() 方法

reportValidity() 方法是 HTMLFormElement 对象的一个方法，用于触发表单的验证。它会检查表单中所有元素的约束条件，如果任何元素未通过验证，则该方法返回 false，并显示相应的错误消息。如果所有元素都通过了验证，则返回 true。

function curlcheck(form){
    var user_id = document.getElementById("user_id");
    var pass = document.getElementById("password");

    if (user_id.reportValidity() && pass.reportValidity()){
        // 表单验证通过，执行 AJAX 请求
        var xmlhttp = new XMLHttpRequest();
        var theUrl = "/submit_test";
        xmlhttp.open("POST", theUrl);
        xmlhttp.setRequestHeader("Content-Type", "application/json;charset=UTF-8");
        xmlhttp.send(JSON.stringify({ "ProgMode": user_id.value, "pass": pass.value }));
        xmlhttp.onreadystatechange = function() {
            if (this.readyState == 4 && this.status == 200) {
                console.log("success");
            }
        }
    }
    return false; // 阻止表单的默认提交行为
}

登录后复制

在上面的代码中，首先获取了 user_id 和 password 两个 input 元素。然后，使用 reportValidity() 方法分别对这两个元素进行验证。只有当两个元素都通过验证时，才会执行 AJAX 请求。

立即学习“前端免费学习笔记（深入）”；

HTML 结构

<form action="" method="POST" onclick="return curlcheck(this);">
    <div name="form header" class="formhead">
        <h1>Welcome</h1>
        <p><span id="loginerr" class="err_alert"></span></p>
    </div>
    <div class="login_box">
        <lable for="user_id">User ID</lable>
        <input type="text" placeholder="Enter User ID" id="user_id" required>

        <label for="password">Password</label>
        <input type="password" placeholder="Enter Password" id="password" required>

        <button>Login</button>

    </div>
</form>

登录后复制

在 HTML 结构中，关键点在于 input 标签的 required 属性，以及 form 标签的 onclick="return curlcheck(this);"。 required 属性确保了表单提交前必须填写该字段。 onclick 事件绑定了 curlcheck 函数，并在函数返回 false 时阻止表单的默认提交行为。

使用 AJAX 发送数据

在表单验证通过后，可以使用 AJAX 技术将表单数据发送到服务器。

创建 XMLHttpRequest 对象：

表单大师AI
一款基于自然语言处理技术的智能在线表单创建工具，可以帮助用户快速、高效地生成各类专业表单。

74

查看详情
```
var xmlhttp = new XMLHttpRequest();
```
登录后复制

配置请求：

var theUrl = "/submit_test"; // 替换为你的服务器端点
xmlhttp.open("POST", theUrl);
xmlhttp.setRequestHeader("Content-Type", "application/json;charset=UTF-8");

登录后复制

这里指定了请求方法为 POST，并设置了 Content-Type 为 application/json，表明我们将发送 JSON 格式的数据。

发送数据：
```
xmlhttp.send(JSON.stringify({ "ProgMode": user_id.value, "pass": pass.value }));
```
登录后复制
使用 JSON.stringify() 方法将 JavaScript 对象转换为 JSON 字符串，然后通过 send() 方法发送到服务器。
处理响应：
```
xmlhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
        console.log("success");
    }
}
```
登录后复制
在 onreadystatechange 事件中，检查请求的状态码和 readyState，如果请求成功完成（readyState 为 4，status 为 200），则执行相应的处理逻辑。