Chen Yangjian's Blog

Carpe diem - Seize the day

Inline Form Validation

| Comments

via A List Apart

Webapp 开发,表单的交互设计往往不可避免。用户注册、评论提交、文件上传等等。 客户端数据自然是不被信任的,即便是通过 HTML、JavaScript 做了很多限制, 服务端程序的安全检测也是必不可少。不过本文无意谈论这个,需要说的是错误信息反馈的机制。

传统方式,是当用户提交的时候检测用户输入的数据。服务端验证反馈,再写到表单页面的消息提示区域; 客户端 JavaScript 检验,有问题的标注出来,等等。而随着 ajax 的成熟,内联表单验证 (Inline Form Validation)变得越来越重要,以下是新方式与老办法的实际应用对比数据 (From A List Apart):

  • a 22% increase in success rates,
  • a 22% decrease in errors made,
  • a 31% increase in satisfaction rating,
  • a 42% decrease in completion times, and
  • a 47% decrease in the number of eye fixations.

实现方式也不难,普通的比如邮政编码、电话号码、身份证号码等确定的,不妨客户端 JavaScript 搞掂, 重头戏比如用户名,则通过 ajax 来弄。有些细节需要注意的是,在用户还没输入什么东西之前, 千万不要把错误(注意与限制信息区分开来)先打出来…… 会让用户很不爽,有点被冤枉的感觉。

详情请参考原文图示。

Comments