JavaScript 进行表单验证

表单校验

本篇主要介绍使用 JavaScript 进行表单验证。

表单验证并不是 JavaScript 提供的某种特性，而是结合各种特性达到的一种目的，是需求的产物。

所有线上产品的表单几乎都有验证，如注册时要求“用户名 6-16 位”，验证会由 JavaScript 来完成，通常为了安全性和准确性，服务端会再次做一遍验证。

1. 验证目标

表单用于收集信息，从 HTML 上讲，表单内容使用 form 标签进行包裹。

<form action="/login">
  <label>
    用户名：<input type="text">
  </label>

  <label>
    密码：<input type="text">
  </label>

  <div>
    <button type="submit">登入</button>
  </div>
</form>

代码块

预览复制

这就是一个相对简单的表单，其中包含文本框（input标签）与按钮（button标签），并使用 form 标签进行包裹。

利用 form 标签，再触发其 submit 事件时，会将表单内容收集后提交个体 action 属性配置的路径。

单其实把 form 标签去掉，在页面上展示的效果几乎是一样的。

<label>
  用户名：<input type="text">
</label>

<label>
  密码：<input type="text">
</label>

<div>
  <button type="submit">登入</button>
</div>·

代码块

预览复制

所以自出现 AJAX 技术后，很多开发者都不再书写 form 标签，直接使用其他元素对表单内容进行包裹，因为业务上可能不需要使用 form 标签的特性来提交表单。

其实不论是使用表单，还是不使用表单，表单的验证都是针对所有表单项的，即输入框、单选项、多选项等。

在表单提交之前，需要对写着表单项的内容做校验，然后拦截提交操作。

2. 获取表单内容

获取表单内容，实际上就是取到表单项对应的 DOM 节点的值。

获取 DOM 节点的方式非常多，前面的章节也有介绍。

<style>
  h3 {margin-top: 0;color: #4caf50;}
  .login {width: 300px;padding: 32px;box-shadow: 2px 2px 10px rgba(0, 0, 0, .1);position: fixed;top: 40%;left: 50%;transform: translate(-50%, -50%);}
  .form-item {display: flex;margin-bottom: 16px;border-bottom: 1px solid #ccc;}
  .form-item