使用 HTML5 验证并使用 Ajax 发送表单数据

本教程旨在解决 HTML 表单在提交前进行客户端验证，并使用 Ajax 将数据以 JSON 格式发送到服务器的问题。我们将探讨如何利用 HTML5 内置的验证功能简化验证流程，并使用 XMLHttpRequest 对象异步发送数据，避免页面刷新。本教程提供详细的代码示例和解释，帮助开发者高效地实现表单验证和数据提交。

HTML5 表单验证

HTML5 引入了内置的表单验证功能，允许开发者通过简单的 HTML 属性（如 required、type、min、max 等）对表单字段进行约束。浏览器会自动检查这些约束，并在字段不满足要求时显示相应的错误消息。

以下示例展示了如何使用 required 属性来确保用户必须填写用户名和密码字段：

<form action="" method="POST" onsubmit="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">
    <label for="user_id">User ID</label>
    <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 type="submit">Login</button>

  </div>
</form>

在这个例子中，user_id 和 password 字段都添加了 required 属性。如果用户尝试在不填写这些字段的情况下提交表单，浏览器将会阻止提交，并显示一个错误消息。

立即学习“前端免费学习笔记（深入）”；

使用 reportValidity() 方法进行验证

除了浏览器自动进行的验证外，我们还可以使用 reportValidity() 方法手动触发验证。这个方法会检查表单中所有字段的有效性，并返回一个布尔值，指示表单是否有效。

以下是如何在 JavaScript 中使用 reportValidity() 方法的示例：

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;
}

在这个例子中，curlcheck() 函数首先获取 user_id 和 password 字段的引用，然后调用它们的 reportValidity() 方法。如果两个字段都有效，函数将继续执行 Ajax 请求，将表单数据发送到服务器。

使用 Ajax 发送表单数据

XMLHttpRequest 对象用于在后台与服务器交换数据，这意味着可以在不重新加载整个页面的情况下更新网页的部分内容。

表单大师AI

一款基于自然语言处理技术的智能在线表单创建工具，可以帮助用户快速、高效地生成各类专业表单。

74

查看详情

在上面的代码示例中，我们使用 XMLHttpRequest 对象将表单数据以 JSON 格式发送到 /submit_test URL。

以下是发送 Ajax 请求的关键步骤：

1. 创建 XMLHttpRequest 对象：

   var xmlhttp = new XMLHttpRequest();

   登录后复制

2. 配置请求：

   var theUrl = "/submit_test";
   xmlhttp.open("POST", theUrl);
   xmlhttp.setRequestHeader("Content-Type", "application/json;charset=UTF-8");

   登录后复制
   • open() 方法指定请求的类型（POST）和 URL。
   • setRequestHeader() 方法设置请求头，指示服务器我们发送的是 JSON 数据。

3. 发送请求：

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

   登录后复制
   • send() 方法将数据发送到服务器。 我们使用 JSON.stringify() 方法将 JavaScript 对象转换为 JSON 字符串。

4. 处理响应：

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

   登录后复制
   • onreadystatechange 属性指定一个函数，该函数将在请求的状态发生变化时被调用。
   • 当 readyState 为 4 且 status 为 200 时，表示请求已完成且成功。

总结

通过结合 HTML5 表单验证和 Ajax 技术，我们可以创建一个用户体验良好的表单，在客户端进行验证，并在后台将数据发送到服务器，而无需重新加载整个页面。 使用 reportValidity() 方法可以方便地检查表单的有效性，XMLHttpRequest 对象则提供了灵活的方式来发送和接收数据。 记住在生产环境中使用更完善的错误处理机制，并对服务器端进行数据验证，以确保数据的安全性和完整性。

以上就是使用 HTML5 验证并使用 Ajax 发送表单数据的详细内容，更多请关注php中文网其它相关文章！