表单开发的四个步骤

说到表单，一般包含：数据的收集、检查、非法输入的界面交互和数据传递。本文简单介绍一下这几个部分以及开发中常用的处理方法。

数据的收集

一般我们会监听表单提交按钮的事件，事件处理函数里收集表单数据。大致有以下几种方法：

1. DOM 操作

利用原生 JavaScript 操作 DOM 获取表单数据，如：

const form = document.getElementById('form');
const formData = new FormData(form);

2. jQuery

使用 jQuery 获取表单数据，如：

const formData = $('#form').serialize();

3. 其他第三方库

如 lodash 等第三方库也可以实现表单数据的收集。

表单校验

表单校验一般包括两个方面：客户端校验和服务端校验。

1. 客户端校验

客户端校验是在用户提交表单之前进行的校验，主要用于检测用户输入的数据是否符合要求，如：

const form = document.getElementById('form');
form.addEventListener('submit', (event) => {
  if (!form.checkValidity()) {
    event.preventDefault();
    event.stopPropagation();
  }
});

2. 服务端校验

服务端校验是在服务器端进行的校验，主要用于检测客户端校验没有检测到的数据问题，如：

if (empty($_POST['username'])) {
  $errors['username'] = '用户名不能为空';
}

非法输入的界面交互

当用户输入非法数据时，需要给予用户友好的提示，如：

const form = document.getElementById('form');
const usernameInput = document.getElementById('username');
usernameInput.addEventListener('input', (event) => {
  if (usernameInput.value.length < 6) {
    usernameInput.setCustomValidity('用户名长度必须大于6位');
  } else {
    usernameInput.setCustomValidity('');
  }
});

数据传递

表单数据可以通过以下几种方式传递到服务器：

1. GET 请求

GET 请求将表单数据作为查询字符串附加到 URL 中，如：

<form action="submit.php" method="get">
  <input type="text" name="username">
  <input type="submit" value="提交">
</form>

2. POST 请求

POST 请求将表单数据作为请求体发送到服务器，如：

<form action="submit.php" method="post">
  <input type="text" name="username">
  <input type="submit" value="提交">
</form>

3. AJAX 请求

AJAX 请求可以实现异步提交表单数据，如：

const form = document.getElementById('form');
form.addEventListener('submit', (event) => {
  event.preventDefault();
  const formData = new FormData(form);
  const xhr = new XMLHttpRequest();
  xhr.open('POST', 'submit.php');
  xhr.send(formData);
});

表单开发是一个相对简单但又重要的任务，掌握好表单开发的技巧可以帮助你快速构建出用户友好的表单。