本文档旨在指导开发者如何利用 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 对象：
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），则执行相应的处理逻辑。
注意事项
- 确保服务器端能够正确处理 JSON 格式的数据。
- 根据实际需求，可以添加更多的表单验证规则，例如，使用 pattern 属性指定输入字段的格式。
- 为了更好的用户体验，可以在表单验证失败时，显示更详细的错误提示信息。
总结
通过结合 HTML5 的表单验证功能和 AJAX 技术，可以实现客户端的表单验证和数据的异步提交，提升用户体验，减轻服务器端的压力。 reportValidity() 方法是进行 HTML5 表单验证的关键。
