如何用php和javascript显示输入字段下的表单错误

<form id="myForm" action="process_form.php" method="POST">
  <div>
    <label for="name">姓名：</label>
    <input type="text" id="name" name="name">
    <span id="nameError" class="error"></span>
  </div>
  <div>
    <label for="email">邮箱：</label>
    <input type="email" id="email" name="email">
    <span id="emailError" class="error"></span>
  </div>
  <button type="submit">提交</button>
</form>

<?php
$errors = array();

// 在这里进行表单验证，并将错误消息存储在$errors数组中

if (count($errors) > 0) {
  http_response_code(400); // 设置响应状态码为400，表示请求错误
  echo json_encode($errors); // 将错误消息数组转换为JSON格式并输出
  exit;
}

// 如果表单验证通过，执行其他操作（例如保存数据到数据库等）
?>

document.getElementById("myForm").addEventListener("submit", function(event) {
  event.preventDefault(); // 阻止表单默认提交行为

  var xhr = new XMLHttpRequest();
  xhr.open("POST", "process_form.php", true);
  xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");

  xhr.onload = function() {
    if (xhr.status === 400) {
      var errors = JSON.parse(xhr.responseText);

      // 显示错误消息
      if (errors.hasOwnProperty("name")) {
        document.getElementById("nameError").textContent = errors.name;
      }
      if (errors.hasOwnProperty("email")) {
        document.getElementById("emailError").textContent = errors.email;
      }
    } else {
      // 表单验证通过，执行其他操作
    }
  };

  var formData = new FormData(document.getElementById("myForm"));
  xhr.send(formData);
});