手写 HTML 表单验证：理解框架背后的原理

前端

2023-11-03 07:50:47

深入解析 HTML5 表单元素：前端表单处理的基础

HTML5 规范引入了一系列丰富的表单元素，为构建健壮且交互友好的表单提供了坚实的基础。这些元素包括：

<input>：文本框、复选框、单选按钮等输入字段
<textarea>：多行文本输入字段
<select>：下拉列表
<datalist>：自动完成功能
<label>：为表单元素提供文本说明
<form>：包裹整个表单结构

这些元素提供了必要的构造块，用于构建复杂且直观的表单，满足各种数据收集需求。

揭开前端框架表单组件的神秘面纱

现代前端框架，如 React、Angular 和 Vue.js，提供了一系列表单组件，简化了表单开发过程。这些组件封装了 HTML5 元素，并提供了额外的功能，例如：

预定义的验证规则
响应式布局
错误处理
样式主题

虽然这些组件提供了便利性，但理解它们的底层原理对于编写健壮且可定制的表单至关重要。

用纯 HTML 手写表单提交和验证

为了深入理解表单处理，让我们着手编写一个基本的手工表单提交和验证功能。

<form action="/submit" method="post">
  <label for="name">姓名：</label>
  <input id="name" name="name" type="text" required>

  <label for="email">邮箱：</label>
  <input id="email" name="email" type="email" required>

  <button type="submit">提交</button>
</form>

这个简单的表单包括两个输入字段：一个用于名称，一个用于电子邮件。当用户点击“提交”按钮时，表单数据将通过 POST 方法发送到 /submit 路由。

JavaScript 验证：添加数据完整性保障

现在，让我们使用 JavaScript 添加一些基本的验证，确保在提交之前数据有效。

<script>
  const form = document.querySelector('form');

  form.addEventListener('submit', (event) => {
    const name = document.querySelector('#name').value;
    const email = document.querySelector('#email').value;

    if (name.length === 0) {
      alert('姓名不能为空！');
      event.preventDefault();
    } else if (!validateEmail(email)) {
      alert('邮箱格式不正确！');
      event.preventDefault();
    }
  });

  function validateEmail(email) {
    return /^[\w-\.]+@[\w-\.]+\.\w+$/.test(email);
  }
</script>