聊聊表单

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

数据的收集

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

• 浏览器自动收集：给form元素设置action表单数据的接收地址，这样点提交后数据会自动收集并传输。这种方式简单便捷，缺点是无法有效定制，很多场景受限。
• FormData构造函数：将form元素传递给FormData构造函数new FormData(formElement)，将formData数据传递给服务端即可。
• 自定义的数据格式：通过获取每个字段的value,自由组装。

我们一般会采用最后一种，因为自由度高。

数据的检查

数据检查又称表单验证，通过设置表单字段的规则避免将不合法表单传输给服务端，从而规避了无效传输。

检查的方式有很多，最常见的就是书写正则表达式来检查输入字符。

单个字段可能有多个检查条件。

有时候一个字段可能需要多个条件的并集，很难通过写一个正则表达式来检查（可能导致正则又长又繁琐，增加出错的概率），通过简单的字符判断也是个不错的主意，比如检测邮箱输入必须包含@符：emailValue.indexOf("@") > -1

有时候一个字段的检查又依赖于另一个字段的值，我们就需要做一些封装了。

最后，需要记录每个字段的检查结果，以及哪条规则没有通过。

界面提示

有了表单检查结果，我们需要把结果告诉给用户，让他明白哪些输入不合法以及这些字段的规则。从而帮助他输入正确的值。

这一步，一般有几个细节：

• 提示的时机
• 提示文本的展性形式：固定还是自动撑开

与其说是开发细节，倒不如说是产品细节。

从用户的角度看，没有人乐意被无端打扰。以常规的登陆节目举例：当用户操作或输入用户名字段时，不应该提示密码的合法性。如果某个字段被输入了或者操作过了，我们称该字段状态为touched。

固定提示文本的好处最大程度减少了元素的视觉跳动，但是界面看起来会比较松散，elementUI就是采用的是固定的方式，通过放大表单元素、缩小提示文本来抵消松散感：

而自动撑开则刚好相反。

我本人则更喜欢自动撑开的提示问题，界面会更紧凑一点，设计感更强一点。

数据的传递

数据的传递其实比较简单了，一般是通过Ajax或fetch。 我本人更喜欢Ajax一点