项目经验谈之三——通过操作提交按钮可见性提升用户体验

本文链接：https://blog.youkuaiyun.com/bethebest/article/details/5310547

在网站的设计中，增强用户体验是一个永恒的追求。《锦绣蓝图:怎样规划令人流连忘返的网站》一书作者提出了一个至关重要的问题：“哪里要留出窗户？”今天，我就要带大家去探求这一问题的一种“Visibility解答”。

在项目经验谈一、二中，我们都在讨论表单的问题，今天依然如此。

既然是表单提交，那么必然会有一个提交按钮。无论你是用函数实现，还是直接赋予submit属性，提交按钮是一个表单中必不可少的部分。那么今天我们就要通过它的可见性，来控制那扇“窗户”的打开与关闭。

一个表单（尤其是用户注册时），往往会设计许多的验证函数，那么我们就让提交按钮在验证不通过时“消失”。

首先，我们设计一个注册页面，表单中含有用户名和密码的输入框，在它们下部有两个按钮，一个是“检查信息”，一个叫做“提交”，body部分代码如下：

然后，我们在head部分写入我们的script函数：

这样，我们就完成了提交按钮的呈现和隐藏。

下面简述一下页面的工作原理。

注意到我们在body标签中写入了onload="hideSubmit()"，也就是说，当页面载入完成时，会调用hideSubmit()函数，使“提交”按钮隐藏。其中的style.visibility其实是一种CSS属性，我们的隐藏是通过动态调整CSS属性来实现的。函数check_name()和check_password()是验证表单内容的模块，其中的正则表达式大家可以自行学习。当我们点击“检查信息”按钮时，如果表单内容通过验证，那么会使“提交”按钮呈现。

叙述完这些，我们还要追究一下细节问题。

问题一：如果我的表单内容通过了验证，而后点击“检查信息”使“提交”按钮呈现，那么我再回去修改我的表单内容到不合法时，这时提交按钮依然是可见的，这种问题如何解决？

解决方案：细心地读者会注意到，input标签中，我们加入了onfocus="hideSubmit()" 属性，也就是说，当我重新修改我的表单内容时，提交按钮又会隐藏起来。

问题二：我听说直接敲击回车会自动提交表单，是这样吗，如何解决这个问题？

解决方案：如果表单中含有一个（且仅有一个）type为submit的按钮，答案是肯定的。我们可以通过设置type为button，然后添加onclick()函数来实现表单的提交，这样就可以避免回车提交的问题。

详细解决方案可以查看我的博文：项目经验谈之一——淘气的submit()

地址：http://blog.youkuaiyun.com/bethebest/archive/2010/02/17/5310552.aspx

问题三：如果浏览器运行不正常，或者浏览器不兼容，会不会造成“提交”按钮的隐藏失效，那样岂不会使“不干净”表单内容的提交呢？

解决方案：这种情况是有的，如果onload()函数无法运行，那么可能造成“不干净”表单内容的提交。为了避免这种情况的发生，我们需要将表单的action属性也隐藏起来。

具体方法可以查看我的博文：项目经验谈之二——隐藏表单action地址增强安全性

地址：http://blog.youkuaiyun.com/bethebest/archive/2010/02/17/5310550.aspx

结合这三种特技，我们就能设计出用户体验良好的、健壮的表单了。