当用户输入错误格式和错误值时,需要提供一个说明;_____20160429

原文地址


说明

该技巧的目的是当用户提供的信息不被接受时,在改正输入错误方面提供帮助。当用户输入的数据无效时,并检测到输入错误,提供输入错误原因和位置的文本描述,让用户能够识别问题。一个方法是使用客户端验证并立即提供一个描述错误的对话框。另一个方法是,使用服务器端验证,重新显示表单(包含任何已输入的数据),页面顶端的文本描述标明有错误,描述问题的原因,并提供方式定位问题区域。

需要做到以下几个方面来帮助用户:

  • 为输入提供正确的范例;
  • 描述正确的输入;
  • 当用户输入无效信息时,给出用户输入数据的正确格式,指导用户怎样输入这些正确的值;


样例

样例1:

用户在表单中输入错误数据。当用户离开区域,出现一个描述错误原因的警告框,用户可以修复错误。

样例2:

用户在表单输入无效数据并提交。服务器返回表单,用户输入的数据仍然存在,并在页面顶部使用文本清楚标识有输入错误。该文本描述了错误的原因和清楚标识哪个区域有问题,这样用户就可以轻松导航到问题区域并修改。

样例3:

用户在表单输入无效数据并视图提交表单。客户端脚本检测到错误,取消提交,修改文件并在提交按钮后提交一个文本描述错误,并带有跳转到错误区域的链接。脚本也会修改问题表单区域的标签并高亮。


无障碍效果

各读屏、各浏览器的支持效果

测试人:

争渡、IE11:
永德、IE11:
NVDA、IE11:
永德、chrome:
NVDA、chrome:
NVDA、Firefox:
voiceover、chrmoe:
voiceover、Safari: