本文档旨在指导开发者如何利用 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
在 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 表单验证的关键。
以上就是使用 HTML5 校验表单并使用 AJAX 发送数据的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1580258.html
微信扫一扫 
支付宝扫一扫 
