学习方法的分享

现在的互联网产品里到处都有等待用户提交的表单，注册、登录、设置、填写个人信息、上传头像、发布内容、发布评价、投票、搜索、发消息、发邮件等等，表单无处不在。原则上所有提交的表单都有正确性验证的问题，即对用户输入的内容、用户的选择进行正确性的验证，如果通过验证则提交成功，如果未通过验证则提交失败。验证可以在前端实现也可以在后端实现，可以很严格也可以适当放宽。

当不符合表单的提交条件的时候，我们如何处理？如何做到更优的用户体验与规范化数据与安全的统一？不容易……

前端来验证用户的输入是用户体验较好的方式，但前端的环境很恶劣，存在那么多种平台、那么多种语言、那么多种浏览器、每个浏览器还有多个版本。你无法知道用户用的是PC还是PDA或是手机或是什么别的电子设备，你也无法知道用户的操作系统是windows？linux？Mac？Palm？Symbian？或是什么别的千奇百怪的玩意儿，你更无法知道用户是否允许了cooke，是否支持js，是否会加载css……。前端的环境是很恶劣的，在前端验证是个恶梦！

但良好的用户体验却是我们一致追求的，让用户用起来得心应手，随时能够得到该有的信息，随时得到帮助是我们必须做的。况且我们面对的是占据绝大多数的pc+windows+ie的用户，其它用户中的绝大多数也是支持js、加载css的。当然也会有那些比较极端的用户，我们也需要尽量让其能够提交我们的表单，能够使用我们的产品。

前面说的恶劣情况还只是技术上的问题，如果是人的问题就更难处理了，比如一个有视力障碍的用户，我们给他那么小的字儿他看的清除吗？允许他调大吗？或是一个不认识红色和蓝色区别的色弱色盲的用户，我们一般定义的蓝色字是链接，红色字是提示的准则还有效吗？如果用户是一个盲人，怎么能让他更方便的使用键盘操作？更方便的使用读屏软件阅读？出错以后怎么知道错在哪里？什么是对的？下一步该如何操作？

纵然前端有千般危险，但验证是必须要做的，而且要做的尽量好，下面先说说前端处理的一些情况：

1，无法提交表单
这样处理比较狠，即表单中任何一项不符合提交条件时，提交按钮不可点击。这属于前端判断，

2，友好的提示信息
在没有输入、选择或者有错误的时候显示错误提示信息，在输入、选择验证通过后显示成功信息。比如注册帐号页的帐号项一般是单行文本输入框，用户名要求3－20位字符：
当用户没有输入用户名时提示：“你还没有输入用户名”
当用户输入内容的长度<3或>20字符的时提示：“你输入的用户名过短”或者“你输入的用户名过长”
当用户输入通过验证时显示：“正确”

3，点击提交后在前端判断
弹出窗口提示还是在页面内提示？
出错的周围提示还是统一位置提示？
多个错误的时候全部显示还是一个一个的显示错误信息？
如果用户仅用了js怎么办？

4，上传文件问题
ie7/firefox为了安全考虑已经是拿不到本地文件了，也就是说以后将拿不到用户浏览的图片的尺寸、体积，或是其它类型文件的体积等信息，因此我们对上传文件的验证就一定要在后端来进行了。比如也许我们对于上传图片的限制是jpg格式、2M以内、长边和短边的比例不能超过1:3等等。这些限制的验证只能由后端进行处理了，即用户上传成功后取得各种文件信息加以验证。特别说一下，图片预览的功能将不再能提供，即选择本地的一张图片，在页面中预览效果这样的功能将不再能实现了。

纵然前端验证很完美，但后端进行验证仍然是必须的，而且是更重要的。况且很多时候很难或不能在前端控制，只能由后端来控制。无论出于安全上还是逻辑严谨性或是出于数据一致性的考虑，后端验证都是极其重要的。用户的信息提交上来之后再进行判断和处理，正确则继续向下走，错误则输出错误信息，这样很可靠。

1，给用户规范数据吗？容错能力以及范围如何？
用户输入生日月份为07和7我们归成一种吗？
写的北京市等同与北京吗？
十等同于10吗？

2，错误提示信息如何显示？
页面统一位置显示或是出错的地方旁边显示？
一次提示所有错误还是一次提示？
返回错误信息的时候之前输入的内容还有吗？
返回错误信息的时候之前输入的正确信息项还显示吗？

3，重复提交如何控制
控制重复提交非常重要，尤其是产品中发布次数是有限制的或是发布之后没有控制权的时候，以及提交的表单有文件上传的时候，或是根本是防治spam能力有限的时候。可以在前端实现也可以在后端实现，防止用户误多点了几次，或是因为网速慢等原因多点了几次，或是有意的多此点击等行为。

目前采用较多的做法是在前端控制，即点击了提交按钮以后，该按钮变成不可点击。在网速慢、上传文件的时候这样的处理会很有用处。或是提交表单后整个屏幕新加载一个透明色的层，如果能够显示一个小动画就更好了。告诉用户表单已经提交，请等候。

后端控制也是个不错的方法，优点是无所不能，不用考虑前端恶劣的环境。即对于同一表单只允许提交一次，这样点击多次的时候后面的点击就不处理了，从而解决了这个问题。但！firefox没有问题但我们最亲爱的ie却有问题！比如很多上传图片的表单都会使用一个浏览的按钮，用以选择本机的图片，选择好了点确认以后，该图片的本地路径就会出现在旁边的输入框内，正常情况下完全没有问题。但如果用户直接在本是放本地文件路径的输入框内输入内容，或是文件有错，或是用户修改了本地路径，ie会出现什么状况呢？它会停在哪里，没有任何动作，服务器得不到任何信息，用户自己也得不到任何信息。

在控制用户多次提交的时候如果用户第一次提交的信息出错了呢？按照上面的逻辑就会出现一旦用户第一次提交的信息出错以后，即使用户改好表单也提交不上去了的结果。因为只允许用户提交一次，并且ie会停掉。这个问题就很恶心了，但我们的ie如此我们也没有办法，只能再做处理，让用户提交错误后还有机会再提交。取消和提交按钮一样，也有这个问题，这是ie的一个bug，顺便表扬一下firefox，如果表单有错也能够提交上去，从而后台程序能够做出相应的响应。

最后，再任何地方放置图形验证码都要小心一些，如果不能避免使用图形验证码，那就提供一下语音读验证码的服务吧！因为读屏软件无法读出图形验证码里的内容，导致盲人用户无法使用我们的产品，我们不能拒绝他们。另外如果能把页面内容精简一些就尽量精简一些吧，对于盲人朋友来说过多的信息、广告会让他们感到比较茫然。更重要的是使用网页标准，标准能解决很多不兼容的问题。