表单交互设计之二——校验思考

你是否经常碰到在填写表单时，提交无数次却还是无法通过校验的情况；或者你是否在为不知道填写中哪里出现错误而抓狂；再或者你是否碰到过当你填写了一大堆信息，之后点击按钮提交时，校验报错的同时，你发现你所填写的所有的信息都被清空；或者你还碰到过很多很多校验当中出现的问题，那么我们现在就开始进行表单校验设计的思考。

那校验有哪些情况呢？

1、 READY？

提到校验，我们往往会联系到提交表单后出现的错误提示类信息，但是其实在填写表单前的提示信息与表单填写校验有着莫大的关系。

此类提示信息能够帮助用户在填写表单前，降低出错的可能性。它出现的形式分为以下几类：

a) 简要提示——有如：icon，icon+文字，文字，暗提示。

出现情况：一般提示信息比较简短，能够让用户一目了然的记住，并且不干扰表单的填写项。

alipay.com付款页面

alibaba.com注册

b) 复杂提示——以缩略信息或icon来显示，通过点击和hover进行查看。

出现情况：提示信息内容较多，需要用户仔细阅读，并且无法简单记忆，直接全部显示会影响整个表单填写，因此此类情况需要hover或者点击操作进行查看。hover或者点击后有浮层，蒙板，或者跳转新页面等情况。

taobao.com机票登机人填写页

ctrip.com机票登机人填写页

c) 限制操作——在表单填写前，对某些需要填写或者操作项会有一些disabled的状态，只有当某些条件被激活用户才能进行操作。

出现情况：当填写项与项之间带有关联性，前面的填写项会影响后面填写项的内容或状态；或当填写项较少，填写项均可以即时校验，就可以将主提交操作项做状态限制。

livestream.com机票登机人填写页

d) 其他提示——填写表单的时候，还有一种比较特殊但又更简单明了的提示，例如：使用图片说明。

出现情况：当填写表单项的提示说明很难用文字清晰表述，这时候可以使用图片，视频等辅助方式来帮助用户快速理解。

alipay.com水电煤缴费页面

2、 ING~

当您浏览完整体的表单，接下来就是进行填写的步骤。在填写的过程中，我们会碰到很多类型的校验，比如：即时校验的友情类提示，即时校验的警示提示，关联性校验的提示。即时的校验也分为三种状态一种是on focus后的帮助提示、输入中的校验、lost focus后的校验。

出现情况：提示信息内容较多，需要用户仔细阅读，并且无法简单记忆，直接全部显示会影响整个表单填写，因此此类情况需要hover或者点击操作进行查看。hover或者点击后有浮层，蒙板，或者跳转新页面等情况

a) 即时校验的友情类提示

即时校验的友情类提示不是提交时无法通过的出错警示，而是给到用户一些更合理的建议或者帮助。

Ctrip.com填写登机人页

（当你选择了儿童票时会提示儿童票的某些特定限制。当你输入的出生日期与你之前选择的购买类型不一致的时候会建议你去购买更合适的类型，但并不强制。）

Buy360.com的注册页

（当onfocus的时候会出现下方帮助提示类信息，当然也有很多网站会做成暗提示。）

163.com的注册页

（当onfocus的时候会出现右边密码的强度，会根据你输入密码的改变而提示你的密码强弱。）