摘要：
这是一篇关于用户体验的文章，主要讲表单验证及提交操作过程中带来的用户体验。艺灵准备了10余个demo，看官快来体验下吧，顺便投出自己满意的一票吧！......

一、起因

这段时间，公司网站(窝窝宝)又在进行改版，然后我写的表单验证......

真的不知道什么样的用户体验才算是好的用户体验！所以，艺灵整理了一些demo，算是做个小调查吧。在demo页面，看官们可以根据自己的喜好来进行投票，艺灵想看看看官们的口味如何。

二、传统网站中的坑爹用户体验！！！

传统的网站系统，对于表单的提交操作，基本都是：当点击了提交按钮后，直接返回后台数据库端返回的信息。而这个信息提示页面是在原窗口打开的，也就是说替换掉了我们刚填写表单的页面，当用户看到提示信息错误时，点击返回修改，此时刚填写的部分数据就丢失了。大致流程配图一张：

艺灵相信，只要看官稍微正常一点，都不喜欢这种用户体验吧！难道看官真的喜欢为了一个注册、登录、等提交需求而愿意花上数十分钟在这个上面并且最终以失败而告终而且心里还窝了一团火？？？

那我们要怎么办呢？

当然是要先进行简单的验证，验证通过后再去发送请求。

虽然话是这么说，但这其中的过程，艺灵是痛苦的！为何痛苦，艺灵准备了10余个不同用户体验的案例，相信看官看完后就知道原因了。

三、提高用户体验的几大类方法

通常会有几下三大类方法：
1、用户输入的时候不去验证，当点击提交按钮时统一进行js验证。例如：过滤非法字符、检测字符长度、填写内容是否符合规范等；
2、当输入框失去焦点或者键盘按下等状态时，对当前输入框进行验证，点击提交的时候先判断前面的是否都通过了，如果没有通过，不让提交；
3、当输入框失去焦点或键盘按下等状态时，js先去判断，合法后再发送ajax请求，及时判断用户名是否注册等信息，提交的时候还是要判断前面的是否都通过了，如果通过了，就直接发送请求。

我们可以看到，上面列举的三大类方法是层层递进的。在用户体验上面：一个比一个细致。但在代码方面，一个比一个多，同时也会付出相应的代价！

可别小看了上面的这三大类方法，如果细展开来，可以写出10余个demo！

接下来，我们就一一来举例说明下吧。

特别说明：由于例子比较多，下面不展示源码、过滤字符也取消，只保留判断取值长度这一项。展示的demo供看官体验，对应的配图会指明问题所在，看官可对照配图点击demo感觉下所谓的用(坑)户(爹)体(需)验(求)！

四、模拟用户体验

4.1、第一类：提交时统一进行js验证

利弊分析：
利：js代码精练，不用发任何ajax请求，大大降低了网站的请求量；
弊：用户体验稍微差了点。

4.1.1、v0.1原始版　：提交时只验证是否有未填写项

对应demo：

配图一张：　操作提示：什么都不要填写就点击【提交】，此时就可以看到效果了。

我们可以再添加一个功能，比如说：验证长度。

4.1.2、v0.2新增功能：验证用户名及密码长度

对应demo：

配说明图一张：　操作提示：在都有值的情况下点击提交，如果长度不在6~20位之间，会显示错误提示。

此时我们还可以再优化功能，例如：当用户输入内容的时候，下面的提示信息清空掉，避免引起误会。

好了，这里我们的第一类方法共展示了2个demo，看官们有感受出差别了吗？如果没有，我们继续向下更精细的进行优化。

4.2、第二类：输入框状态改变时进行验证

利弊分析：
利：用户体验比第一类要更好一些；
弊：代码变多了、程序变复杂了。对于一些难以欣赏的看官来说，还不如之前的......

4.2.1、v0.3优化功能：输入框失去焦点时清空错误信息

对应demo：

配图一张：　操作提示：1.什么都不填写直接提交，此时会显示提示信息；2.鼠标点击下文本框，然后在其它任意地方点击，此时提示信息被清空掉。清空的原因是避免让用户产生误解。

什么是失焦点？

鼠标先点击一下输入框，然后在其它任意地方(除自己外)点击一下即为失去焦点。

有些看官会说失去焦点并不好，那么我们可以再优化下，例如：将失去焦点改成按键。

4.2.2、v0.4优化功能：按下键盘时清空错误信息

对应demo：

配图一张：　操作提示：1.什么都不填写直接提交，此时会显示提示信息；2.在文本框中输入内容，此时提示信息被清空掉。

什么是按下键？

简单理解为：键盘上的任意一个键被按下。

此时是不是感觉稍微更好了点？但如果想做的更好，我们的提示信息需要进行一一对应位置才行，像这样统一显示在一个区域，显然并不是很好。所以，我们的布局需要稍微调整下。

对于提示信息来说，通常有两种放法：
1、显示在输入框的后面；
2、显示在输入框的下面。配图一张：　

至于显示位置，看官喜欢就行，并不一定非要按这两种位置摆放，让用户能理解，看着舒服是我们想要的效果。

4.2.3、v0.5优化功能：提示信息和输入框一一对应

对应demo：

配图一张：　操作提示：1.随便填写内容后提交，提示信息会显示在对应内容的后面；2.鼠标点击下文本框，然后在其它任意地方点击，此时提示信息被清空掉

4.2.4、v0.6优化功能：提示信息和输入框一一对应，按键时触发

对应demo：

配图一张：　操作提示：1.随便填写内容后提交，提示信息会显示在对应内容的后面；2.在文本框中输入内容，此时提示信息被清空掉

此时，艺灵觉得用户体验还不是很好。比如说：输入用户名的时候，突然忘记要输入几位了，然后其它地方也没有提示，这个是不是也要优化下呢？但此举会引来大量的吐槽。我们还是先来看下效果吧。

4.2.5、v0.7优化功能：失焦时显示提示信息，满足条件时清除

对应demo：

配图一张：　操作提示：1.随便填写内容后提交，提示信息会显示在对应内容的后面；2.鼠标点击下文本框，然后在其它任意地方点击，此时提示信息被清空掉

4.2.6、v0.8优化功能：按键时显示提示信息，满足条件时清除

对应demo：

配图一张：　操作提示：1.随便填写内容后提交，提示信息会显示在对应内容的后面；2.在文本框中输入内容，此时提示信息被清空掉

当走到这一步的时候，我们的用户体验就上升了一个档次了。当然了，虽然越来越精细，但付出的代价也会是成正比的......

4.3、第三类：结合ajax进行后端数据验证，验证通过后再提交。

利弊分析：
利：用户体验比第二类还要更好一些；
弊：代码又变多了、程序变复杂了、请求变多了、服务器压力变大了......

4.3.1、v0.9优化功能：失焦并满足条件时发送请求返回信息

对应demo：

配图一张：　操作提示：1.随便填写内容后提交，提示信息会显示在对应内容的后面；2.鼠标点击下文本框，然后在其它任意地方点击，此时提示信息被清空掉

4.3.2、v1.0优化功能：按键并满足条件时发送请求返回信息

对应demo：

配图一张：　操作提示：1.随便填写内容后提交，提示信息会显示在对应内容的后面；2.鼠标点击下文本框，然后在其它任意地方点击，此时提示信息被清空掉

此处，我们还可以进行优化。比如说：增加正则验证和过滤、防双击提交、控制频繁发送ajax请求、使用ajax提交等等。接下来再展示一个增强版的案例。

4.3.3、v1.1优化功能：使用ajax提交并防快速多次提交

对应demo：

配图一张：　操作提示：此处使用ajax进行提交，提交成功后数据返回到当前页面中

是不是感觉现在又太复杂了？？？那我们来偷工减料下吧。

4.3.4、v1.2偷工减料：使用ajax提交，但js不进行验证长度，利用后端数据验证

对应demo：

配图一张：　操作提示：使用ajax提交，但js不进行验证长度，利用后端数据验证后返回提示信息

看官还想偷工减料吗？再减的话就是下面这个样子！

4.3.5、v1.3偷工减料：js全部撤去，一切提示信息均由ajax返回

对应demo：

配图一张：　操作提示：使用ajax提交，js全部撤去，一切提示信息均由ajax返回

看官们可以看看百度，淘宝等大型网站的注册和登录功能，个人觉得用户体验真的有些坑，怎么样都不是太好......

六、投票说明

艺灵简单写了一个小程序，按ip计算，同一ip只能提交一次，所以看官在提交前请三思。点此进入投票页面。此次的投票，艺灵希望看到的是理性的结果，也许您的投票会对我们以后的项目产生一定的影响，谢谢您的参与。

----------完----------

转载声明：
　　若亲想转载本文到其它平台，请务必保留本文出处！
本文链接：/xwzj/2016-06-07/412.html

若亲不想直保留地址，含蓄保留也行。艺灵不想再看到有人拿我的技术文章到他的地盘或者是其它平台做教(装)程(B)而不留下我的痕迹。文章你可以随便转载，随便修改，但请尊重艺灵的劳动成果！谢谢理解。