浮起来的验证消息

　　在我之前的一篇文章《如何制作好一个提交按扭》中，讨论了表单提交相关的事宜，后来又在具体的项目实践中发现还有要完善的地方。关于验证消息的摆放问题。

　　如果你的版面够宽，并且客户没有要求，你可以自己设计界面，那还好，不会存在我所碰到的问题。因为你完全可以常规地把用户输入出错时弹出的验证消息放在一块预先留好的空白地带。比如下面这样：

　　这种方式是很常见用得非常多的方式。

　　现在的问题是，客户给了你这样的界面：

　　当你埋头苦干完成布局后，实际运行时出现这样的情况：

　　你可以看到，可恶的验证消息把原先活生生的布局给糟蹋成了什么样子。于是我就寻思着，验证消息不能这么放,得另想出路。

　　三个解决办法。

　　一是只给出一条总的验证消息，不为每个输入都设置一条需要显示出来的消息。如非死不可的注册页面那样：

　　这里的汇总验证消息会给出具体哪里出错了，比如上面说的请写出正确的邮件地址，然后很多时候，有些很不负责的开发人员并没有把工作做得像非死不可这样的大公司这样到位，只是在汇总验证消息这里给出一条固定的错误信息，比如“请检查表单中的错误后再提交”，具体是哪里填错了你丫自己找去吧。试想你在填一个拥有向十个条目的表单，系统又不给出更为具体的提示，而只是这样不负责任地叫你自己去找错误，是不是有砸键盘的冲动。当然，这样做的后果是丢失用户。为了争取用户，我们必需要提升用户的体验，用户体验做得越好，就越多人愿意用。

　　其实提到用户体验，不止是给出友好的提示信息这块需要注意，很多地方很多细节，都是值得开发人员去细心拿捏的。虽然不一定每个用户都是挑剔的用户，但你拿一个考虑不够全面的产品出来给用户时，哪天用户遇到了一个更加注重细节的产品，这些细节用户是会体会到的，当用户丢失了你到时候来二次返工意义都没有多大了。这里给大家看个小小的细节问题，移动的无线上网业务的客户端产品，G3随e行的登陆界面：

　　不知你们发现什么问题没有，当然这里我不说它的网有多破，功能什么的也不讨论，单看这个界面就让人感到有多狗血了，美工就犯了个常识性的错误。‘流量信息’和‘电话簿’的图标，看着是不是很扯，他们的倒影是拿图标图片直接翻转而来的！对于前面两个图标，没问题，但后面两个图标的倒影，稍微相像一下生活中放在桌子上的水杯就可以发现问题，哪有这么坑爹的倒影，看着真心蛋疼！下面我把这个界面倒影的逻辑应用到水杯上， 大家可以看看效果：

　　同样的道理，电话簿也是这样的常识错误。虽然不是每个用户会发现或者在意这些东西，管他呢，只要功能没有bug能用就行，但这个真的不该成为开发人员偷懒的借口。如果没有追求完美的萝卜丝，苹果公司也走不到今天。

似乎扯远了，回到本篇文章的主题来。

这种显示验证消息的方式好不好，要说不好，非死不可这样的全球大公司都在用，肯定不能说不好。我猜可能是考虑到排版的问题，上面的输入框也都那么整齐，如果验证消息放在每个框的后面的话，会破坏整个布局的整齐性，放在输入框的下面会把下面的内容往下挤，在没有验证消息时又会把下面的内容抬上来。

　　二是用弹框，像某著名华人论坛的注册页面那样：

　　这样的方式需要用户点击确定，不是最佳的选择，你每次错误都要点击一下确定，表单内容少还无妨，内容多了错误的地方很多的话，那就点得有点手软了。

　　最后就是让验证消息处于页面的上层，不跟表单内容在同一层，这样就不会把原来的布局破坏掉了。我更倾向于这种方式来显示表单的验证消息。这种方式不管用在哪里都不会有问题，特别是页面的Grid控件中，根本没有单独的空白来放置验证消息，都是拿来显示数据的区域。

　　上图就是Kendo UI的Grid控件，这也是为什么它采用了把验证消息浮起来放在上层的原因。

　　那，我们要实现这种浮起来的效果也是相当简单的，只需一句CSS代码。真的就只需一句，只要一句。

　　我们可以查看一下网页源码，看它是怎么实现的，就可以从中找到答案。

　　经验证，就是那个position属性在起作用，当我把这个CSS属性去掉后，验证消息就跑到Grid里面去了，破坏了原来的布局：

　　所以，在以后的场合中，只需给你的验证消息加上position:absolute这条CSS语句，它就会在显示时浮于页面内容的上方，从而避免了破坏原来的布局。

　　最后，我在项目中修改后，问题解决了。当你输入正确，验证消息会消失，不会影响其他操作。

相关连接：

如何制作好一个提交按扭---我是个爱折腾的人

http://www.cnblogs.com/Wayou/archive/2012/09/19/how_to_make_a_nice_submit.html