本文旨在帮助开发者解决 HTML5 表单在提交前进行有效性验证，并使用 Ajax 将表单数据以 JSON 格式发送到服务器的问题。我们将探讨如何利用 HTML5 内置的验证功能，结合 JavaScript 的 reportValidity() 方法，确保表单数据的完整性，并避免在验证未通过的情况下进行数据提交，从而提升用户体验和数据质量。
利用 HTML5 内置验证
HTML5 引入了内置的表单验证功能，允许开发者通过简单的 HTML 属性（如 required、type、min、max 等）来定义表单字段的约束。浏览器会自动检查这些约束，并在提交表单时显示相应的错误提示。
例如，在以下代码中，user_id 和 password 字段都添加了 required 属性，这意味着它们必须填写才能提交表单。
<input type="text" placeholder="Enter User ID" id="user_id" required> <input type="password" placeholder="Enter Password" id="password" required>
使用 reportValidity() 方法进行验证
为了在 JavaScript 中触发和检查 HTML5 的内置验证，可以使用 reportValidity() 方法。此方法会检查表单或表单元素是否满足所有约束，并返回一个布尔值，指示验证是否成功。如果验证失败，浏览器会自动显示相应的错误提示。
立即学习“前端免费学习笔记（深入）”；
以下代码展示了如何使用 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() 函数的返回值，以阻止表单的默认提交行为。
<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>注意事项
- 浏览器兼容性： 尽管 reportValidity() 方法在现代浏览器中得到了广泛支持，但在某些旧版本浏览器中可能无法正常工作。建议进行充分的测试，并考虑为不支持的浏览器提供备选方案。
- 自定义验证： HTML5 内置的验证功能虽然方便，但可能无法满足所有需求。如果需要进行更复杂的验证，可以结合 JavaScript 自定义验证逻辑，并在 reportValidity() 方法之前执行。
- 用户体验： 确保错误提示信息清晰明了，能够帮助用户快速找到并解决问题。可以自定义错误提示的样式，以提升用户体验。
总结
通过利用 HTML5 内置的验证功能和 reportValidity() 方法，可以轻松地在客户端实现表单验证，从而避免无效数据的提交。结合 Ajax 技术，可以将验证后的数据以 JSON 格式发送到服务器，实现高效的数据交互。在实际开发中，需要根据具体需求选择合适的验证策略，并关注浏览器兼容性和用户体验。
