JavaScript 表单提交前验证：确保用户输入符合规范(表单,提交,符合....)

本文档旨在指导开发者如何在 JavaScript 中实现表单提交前的用户输入验证，确保提交的数据符合预期的格式（例如，仅允许数字）。通过监听表单的 submit 事件，我们可以拦截提交请求，执行验证逻辑，并在验证失败时阻止表单提交，从而提高数据质量和用户体验。本文将提供详细的代码示例和解释，帮助您轻松掌握这一技巧。

表单结构

首先，我们需要一个包含需要验证的输入字段的 HTML 表单。以下是一个示例，其中包含三个文本输入框，分别用于输入仓库 ID (W_ID)、区域 ID (D_ID) 和客户 ID (C_ID)，并且都要求仅输入数字。

   

      

         
Select Warehouse:
         

            
         
         
      
      

         
Select District:
         

            
         
         
      
      

         
Select Customer:
         

            
         
         
      
   
   Submit

关键点：

• id="myForm": 为表单指定一个唯一的 ID，方便 JavaScript 获取表单元素。
• placeholder="numbers only": 提示用户输入的内容格式。
• 使用单个 zuojiankuohaophpcnform> 标签，避免嵌套。

JavaScript 验证逻辑

接下来，我们将使用 JavaScript 来验证表单输入。我们将监听表单的 submit 事件，并在事件处理函数中执行验证逻辑。

var form = document.getElementById("myForm");

form.addEventListener("submit", function (e) {
  e.preventDefault();

  var target = e.target;
  var formData = new FormData(target);
  var data = Object.fromEntries(formData.entries());

  var regex = /^[0-9]+$/;
  if (
    !data.W_ID.match(regex) ||
    !data.D_ID.match(regex) ||
    !data.C_ID.match(regex)
  ) {
    alert("Only numbers accepted.");
  } else {
    // Continue form submittion.
    this.submit();
  }
});

代码解释：

燕雀光年

一站式AI品牌设计平台，支持AI Logo设计、品牌VI设计、高端样机设计、AI营销设计等众多种功能

68 查看详情

1. document.getElementById("myForm"): 获取 HTML 中 id 为 "myForm" 的表单元素。
2. form.addEventListener("submit", function (e) { ... }): 为表单添加一个 submit 事件监听器。当用户尝试提交表单时，该函数将被调用。
3. e.preventDefault(): 阻止表单的默认提交行为。这允许我们在 JavaScript 中执行验证，并在验证通过后手动提交表单。
4. var formData = new FormData(target);: 创建一个 FormData 对象，用于收集表单中的数据。
5. var data = Object.fromEntries(formData.entries());: 将 FormData 对象转换为一个普通 JavaScript 对象，方便访问数据。
6. var regex = /^[0-9]+$/;: 定义一个正则表达式，用于匹配仅包含数字的字符串。
7. !data.W_ID.match(regex) || !data.D_ID.match(regex) || !data.C_ID.match(regex): 使用正则表达式测试每个输入字段的值。如果任何一个字段的值不匹配正则表达式（即包含非数字字符），则条件为真。
8. alert("Only numbers accepted."): 如果验证失败，则显示一个警告框，提示用户仅输入数字。
9. this.submit(): 如果验证通过，则手动提交表单。

PHP 集成

将 JavaScript 代码嵌入到 PHP 文件中，只需将代码放在

注意事项：

• 确保