汉码未来

1. 验证目标

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

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

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

  <div>
    <button type="submit">登入</button>
  </div></form>
代码块
1
2
3
4
5
6
7
8
9
10
11
12
13

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

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

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

<label>
  用户名：<input type="text"></label><label>
  密码：<input type="text"></label><div>
  <button type="submit">登入</button></div>·
代码块
1
2
3
4
5
6
7
8
9
10
11

所以自出现 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 .title {width: 70px;color: #666;font-size: 14px;}
  .form-item .content {flex: 1;}
  .form-item .content input {width: 100%;border: 0 none;padding: 2px 8px;outline: none;font-size: 16px;}
  .login-btn {width: 100%;border: 0 none;background-color: #4caf50;color: white;margin-top: 16px;outline: none;height: 32px;}
  .login-btn:active {background-color: #2da050;}</style><form name="login-form" class="login">
  <h3>登入</h3>
  <label class="form-item">
    <div class="title">用户名</div>
    <div class="content">
      <input id="account" class="account" name="account" type="text">
    </div>
  </label>

  <label class="form-item">
    <div class="title">密码</div>
    <div class="content">
      <input name="pwd" type="password">
    </div>
  </label>

  <div>
    <button class="login-btn" type="submit">登入</button>
  </div></form><script>
  var account1 = document.getElementById('account');
  var account2 = document.getElementsByName('account');
  var account3 = document.getElementsByClassName('account');

  alert(account1 === account2[0]);
  alert(account1 === account3[0]);

  var account4 = document.forms['login-form']['account'];

  alert(account1 === account4);

  console.log(document.forms['login-form'].elements);</script>
代码块
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46

前三种获取节点的方式读者都已经熟悉了。

account4 的获取方式稍微有点不一样，document.forms 是文档内的表单集合，其可以通过表单的 id 和 form 的属性，取到具体的某个表单。

取到表单后，还可以直接使用表单项的 name 属性取到对应的表单项，使用 elements 可以取到这个表单下的所有表单项。

3. 校验表单项

获取到表单项后，就可以对表单项的值做判断了，如密码必须是 6-16 位：

<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 .title {width: 70px;color: #666;font-size: 14px;}
  .form-item .content {flex: 1;}
  .form-item .content input {width: 100%;border: 0 none;padding: 2px 8px;outline: none;font-size: 16px;}
  .login-btn {width: 100%;border: 0 none;background-color: #4caf50;color: white;margin-top: 16px;outline: none;height: 32px;}
  .login-btn:active {background-color: #2da050;}</style><form name="login-form" class="login" action="https://hanma.com">
  <h3>登入</h3>
  <label class="form-item">
    <div class="title">用户名</div>
    <div class="content">
      <input autocomplete="off" id="account" class="account" name="account" type="text">
    </div>
  </label>

  <label class="form-item">
    <div class="title">密码</div>
    <div class="content">
      <input autocomplete="off" name="pwd" type="password">
    </div>
  </label>

  <div>
    <button class="login-btn" type="submit">登入</button>
  </div></form><script>
  var loginForm = document.forms['login-form'];
  var pwdEle = loginForm.pwd;

  loginForm.onsubmit = function(e) {
    var pwd = pwdEle.value;

    if (pwd.length < 6 || pwd.length > 16) {
      alert('密码长度 6-16');
      return false; // 可以使用 return e.preventDefault() 代替
    }

    setTimeout(function() {
      alert('登入成功，马上跳转！');
    }, 1000);
  };</script>
代码块
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49

这里获取到了表单元素，同时给表单的事件处理器属性 onsubmit 赋值，表示在表单被提交的时候做的事情。

在事件处理器中，通过输入框的 value 属性获取到了输入的值，对值进行了长度判断，如果长度不正确则返回 false，表单则会终止提交。
如果正确，则会根据 form 标签的 target 属性进行提交。

需要注意的是，这里如果使用 addEventListener 来监听 submit 事件，必须使用 preventDefault 来阻止默认事件，即阻止表单提交，不能使用 return false;。

var loginForm = document.forms['login-form'];var pwdEle = loginForm.pwd;loginForm.addEventListener('submit', function(e) {
  var pwd = pwdEle.value;

  if (pwd.length < 6 || pwd.length > 16) {
    alert('密码长度 6-16');
    e.preventDefault(); // 代替return false
    return;
  }

  setTimeout(function() {
    alert('登入成功，马上跳转！');
  }, 1000);});
代码块
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

4. 不使用 form 提交表单

不使用 form 标签来提交表单，通常都是使用 AJAX 进行数据交互的情况。

这个时候就不需要拦截 form 的提交行为了。

<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 .title {width: 70px;color: #666;font-size: 14px;}
  .form-item .content {flex: 1;}
  .form-item .content input {width: 100%;border: 0 none;padding: 2px 8px;outline: none;font-size: 16px;}
  .login-btn {width: 100%;border: 0 none;background-color: #4caf50;color: white;margin-top: 16px;outline: none;height: 32px;}
  .login-btn:active {background-color: #2da050;}</style><div class="login">
  <h3>登入</h3>
  <label class="form-item">
    <div class="title">用户名</div>
    <div class="content">
      <input autocomplete="off" id="account" class="account" name="account" type="text">
    </div>
  </label>

  <label class="form-item">
    <div class="title">密码</div>
    <div class="content">
      <input autocomplete="off" name="pwd" type="password">
    </div>
  </label>

  <div>
    <button class="login-btn" type="button">登入</button>
  </div></div><script>var loginBtn = document.querySelector('.login-btn');var pwdEle = document.querySelector('[name="pwd"]');function login(cb) {
  // 假装登入花了 1 秒
  setTimeout(function() {
    alert('登入成功');
    cb && cb();
  }, 1000);}loginBtn.addEventListener('click', function() {
  var pwd = pwdEle.value;

  if (pwd.length < 6 || pwd.length > 16) {
    alert('密码长度 6-16');
    return;
  }

  login(function() {
    window.location.href = 'https://hanma.com';
  });});</script>
代码块
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57

使用这种方式，就可以自主控制流程，不需要再考虑 form 标签的行为。

5. 小结

校验表单非常常见，校验表单的场景很多时候远没有本篇介绍的这么简单，有时候数据校验的格式非常复杂，需要结合正则、校验算法等方式来解决，如严格的身份证验证就需要结合身份证算法。

但表单的校验总的来说都遵循获取表单元素、获取表单元素的值、对值进行判断、根据判断结果做下一步动作。