网页表单交互设计细节:表单校验设计的思考(2)

b) 即时校验的警示提示

即时校验的警示提示是属于错误类提示，这类错误会影响表单无法提交。

警示提示类的校验重要级别非常高，因此在颜色和位置上都需要非常明显。有很多网站甚至将出错内容和出错后如何修改的建议都放在了该提示中显示。

163.com的注册页

Buy360.com的注册页

c) 关联性校验

关联性校验是所填写项之间会有相互影响的逻辑关系，后一项的填写是否正确会取决与前几项的填写内容。

Buy360.com的注册页

（设置密码填写项与确认密码填写项不一致时会提示错误。）

招商银行信用卡支付页

携程旅行计划创建页

（旅行计划目的地1和目的地2的时间段有冲突时就会提示错误。）

3、 ACTION！

当您填写完表单，开始触发提交按钮的时候，表单会开始进行表单提交后的校验。目前比较多的有两种，一种是逐条提示，另一种是一次性全部提示。

a) 逐条提示

逐条提示是在提交表单后，虽然有多项错误，但是每次提交只按顺序显示一条错误。逐条告知错误提示，会导致用户改完之后再次提交又需要重复修改，视线流上下来回，不停的修改不停的提交，多次操作才能完成整个表单的过程。

yihaodian.com注册页

b) 一次性全部提示

一次性全部提示是在提交表单时将所有错误全部罗列。

Yahoo.com注册页

Hotels.com预订页

（该网站设计不仅将所有错误一次性全部罗列在填写框右侧，并且提交按钮的hover状态再次将所有错误呈现，点击某项错误会直接锚点跳转至该错误填写区域。）

思考：

出错提示有4个基本原则：即时反馈出错提示，出错提示的位置显示恰当并且明显突出，提示信息内容清晰易懂，一次性显示全部出错提示。

除了这些基本的设计原则，在设计表单的校验中，还会有很多让我很纠结的点，以下罗列一些我个人认为比较好的经验。

1、 在设计校验时虽然需要考虑到出错提示的明显突出，但是在实际情况中，会和页面的空间大小和布局相关，需要考虑实际情况来定夺。

2、 尽量避免不必要的错误，一是自动喷入值；二是限制型操作；

比如，在身份证填写项中填写了身份证信息时，如果下面还需要填写出生日期，完全可以直接喷入身份证上的出生日期值。

3、 有的错误校验会自动修正一些信息，但是这类行为请不要忘记告知用户。

4、 友情类提示的校验重要级别永远低于警示类错误校验，在视觉和交互的位置上应该酌情考虑。

5、 错误信息出现的位置视觉等效果应该统一，并且在位置上保持在用户可见的范围内。

6、 页面自动锚记至出错项处，如果是多条可锚记至第一项，最好还能on focus至出错的填写项。

7、 不要轻易清空用户填写的内容。

8、 错误提示不仅显示错误点，更可以推荐用户一些正确填写建议。

9、 出现了错误提示后，再次on focus至填写项时，不要隐藏错误提示。

作者：S++