表单必填字段未填写时如何防止页面刷新？

如何阻止页面在没有数据的情况下按下发送按钮时刷新？

简介

在构建 Web 表单时，确保在用户提交表单时输入所有必要信息至关重要。然而，如果未填写某些字段，表单提交可能会导致页面刷新，丢失输入的信息并让用户感到沮丧。本文将介绍一个分步指南，帮助你防止在没有数据的情况下按下发送按钮时页面刷新。

步骤 1：定义 JavaScript 验证函数

为了验证表单数据，我们需要定义一个 JavaScript 函数。此函数将检查必填字段是否已填写，并突出显示任何缺失的信息。

function validateForm() {
  // 获取表单元素
  const form = document.getElementById("prospects_form");
  const name = document.getElementById("form_name");
  const email = document.getElementById("form_email");
  const message = document.getElementById("form_message");
  const captcha = document.getElementById("form_captcha");

  // 验证规则
  let isValid = true;
  if (name.value === "") {
    name.classList.add("invalid");
    isValid = false;
  }
  if (email.value === "" || !validateEmail(email.value)) {
    email.classList.add("invalid");
    isValid = false;
  }
  if (message.value === "") {
    message.classList.add("invalid");
    isValid = false;
  }
  if (captcha.value !== "captcha_code") {
    captcha.classList.add("invalid");
    isValid = false;
  }

  return isValid;
}

步骤 2：添加发送按钮的事件监听器

一旦定义了验证函数，我们需要将事件监听器添加到发送按钮，当用户点击它时触发此函数。这将阻止页面刷新并允许我们处理验证。

const sendButton = document.getElementById("form_send");
sendButton.addEventListener("click", function (e) {
  e.preventDefault(); // 阻止页面刷新

  // 调用验证函数
  if (!validateForm()) {
    alert("请填写所有必填字段。");
  } else {
    // 如果验证通过，提交表单
    form.submit();
  }
});

步骤 3：验证电子邮件地址

验证电子邮件地址至关重要，以确保用户输入有效的电子邮件地址。可以使用以下正则表达式检查电子邮件地址的有效性。

function validateEmail(email) {
  const re = /^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
  return re.test(email);
}

步骤 4：在 HTML 中添加无效样式

为了让用户轻松识别未填写的字段，我们需要在 CSS 中添加一个类来设置无效样式。

<style>
  .invalid {
    border: 1px solid red;
  }
</style>

步骤 5：自定义验证码

请注意，本示例中的验证码已设置为 "captcha_code"。根据需要，你可以将此值更改为更安全的验证码生成器。

结论

通过遵循这些步骤，你可以防止页面在未输入数据的情况下按下发送按钮时刷新。这将显着改善用户体验，并有助于你收集完整准确的信息。

常见问题解答

• 为什么页面在未输入数据的情况下刷新？
  当未填写表单中的所有必填字段时，浏览器会默认刷新页面。
• 验证函数是如何工作的？
  验证函数检查必填字段是否已填写，并突出显示任何缺失的信息。
• 如何验证电子邮件地址？
  可以使用正则表达式来检查电子邮件地址的有效性。
• 如何阻止页面刷新？
  通过使用 e.preventDefault() 方法，可以在单击发送按钮时阻止页面刷新。
• 如何自定义验证码？
  你可以使用更安全的验证码生成器来自定义验证码。