本文旨在帮助开发者解决 HTML5 表单在提交前进行有效性验证，并使用 Ajax 将表单数据以 JSON 格式发送到服务器的问题。我们将探讨如何利用 HTML5 内置的验证功能，结合 JavaScript 的 reportValidity() 方法，确保表单数据的完整性，并避免在验证未通过的情况下进行数据提交，从而提升用户体验和数据质量。
利用 HTML5 内置验证
HTML5 引入了内置的表单验证功能，允许开发者通过简单的 HTML 属性（如 required、type、min、max 等）来定义表单字段的约束。浏览器会自动检查这些约束，并在提交表单时显示相应的错误提示。
例如，在以下代码中，user_id 和 password 字段都添加了 required 属性，这意味着它们必须填写才能提交表单。
使用 reportValidity() 方法进行验证
为了在 JavaScript 中触发和检查 HTML5 的内置验证，可以使用 reportValidity() 方法。此方法会检查表单或表单元素是否满足所有约束，并返回一个布尔值，指示验证是否成功。如果验证失败，浏览器会自动显示相应的错误提示。
立即学习“前端免费学习笔记（深入）”；
齐博B2B系统是一款基于PHP程序和Mysql数据库为基础的开源B2B行业门户电子商务网站建站系统， 系统代码完整、开源，功能全面，架构优秀，提供良好的用户体验、及管理平台，是目前搭建B2B行业门户网站最好的程序之一。齐博B2B具有的功能特点包括：通行证整合功能通过通行证的整合，可以与流行的PHPWIND论坛或Discuz论坛以及Ucenter中心等进行通讯，从而为用户提供更多的交流场所，增加网站
以下代码展示了如何使用 reportValidity() 方法来验证 user_id 和 password 字段：
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;
}整合表单和 JavaScript
要将验证逻辑与表单关联起来，可以将 curlcheck() 函数绑定到表单的 onclick 事件上。注意，需要移除 button 标签上的 type="submit" 属性，并直接使用 button 标签。同时，将 onclick 事件添加到 form 标签上，并返回 curlcheck() 函数的返回值，以阻止表单的默认提交行为。
注意事项
- 浏览器兼容性： 尽管 reportValidity() 方法在现代浏览器中得到了广泛支持，但在某些旧版本浏览器中可能无法正常工作。建议进行充分的测试，并考虑为不支持的浏览器提供备选方案。
- 自定义验证： HTML5 内置的验证功能虽然方便，但可能无法满足所有需求。如果需要进行更复杂的验证，可以结合 JavaScript 自定义验证逻辑，并在 reportValidity() 方法之前执行。
- 用户体验： 确保错误提示信息清晰明了，能够帮助用户快速找到并解决问题。可以自定义错误提示的样式，以提升用户体验。
总结
通过利用 HTML5 内置的验证功能和 reportValidity() 方法，可以轻松地在客户端实现表单验证，从而避免无效数据的提交。结合 Ajax 技术，可以将验证后的数据以 JSON 格式发送到服务器，实现高效的数据交互。在实际开发中，需要根据具体需求选择合适的验证策略，并关注浏览器兼容性和用户体验。
