本文档旨在指导开发者如何利用 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 结构

    

        
Welcome
        

    
    

        User ID
        

        Password
        

        Login

    

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

使用 AJAX 发送数据

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

1. 创建 XMLHttpRequest 对象：

   

   瑞宝通JAVA版B2B电子商务系统

   瑞宝通B2B系统使用当前流行的JAVA语言开发，以MySQL为数据库，采用B/S J2EE架构。融入了模型化、模板、缓存、AJAX、SEO等前沿技术。与同类产品相比，系统功能更加强大、使用更加简单、运行更加稳 定、安全性更强，效率更高，用户体验更好。系统开源发布，便于二次开发、功能整合、个性修改。 由于使用了JAVA开发语言，无论是在Linux/Unix，还是在Windows服务器上，均能良好运行

   下载

   var xmlhttp = new XMLHttpRequest();

2. 配置请求：

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

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

3. 发送数据：

   xmlhttp.send(JSON.stringify({ "ProgMode": user_id.value, "pass": pass.value }));

   使用 JSON.stringify() 方法将 JavaScript 对象转换为 JSON 字符串，然后通过 send() 方法发送到服务器。

4. 处理响应：

   xmlhttp.onreadystatechange = function() {
       if (this.readyState == 4 && this.status == 200) {
           console.log("success");
       }
   }

   在 onreadystatechange 事件中，检查请求的状态码和 readyState，如果请求成功完成（readyState 为 4，status 为 200），则执行相应的处理逻辑。

注意事项

• 确保服务器端能够正确处理 JSON 格式的数据。
• 根据实际需求，可以添加更多的表单验证规则，例如，使用 pattern 属性指定输入字段的格式。
• 为了更好的用户体验，可以在表单验证失败时，显示更详细的错误提示信息。

总结

通过结合 HTML5 的表单验证功能和 AJAX 技术，可以实现客户端的表单验证和数据的异步提交，提升用户体验，减轻服务器端的压力。 reportValidity() 方法是进行 HTML5 表单验证的关键。