您的位置：首页 > 其它

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

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

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

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

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

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

<body onload="hideSubmit()">

<form name="regform" method="post" action=”…”>

<table>

<tr>

<td>

用户名：

</td>

<td>

<input name="regname" type="text" id="regname"

onblur="check_name()" onfocus="hideSubmit()" size="24"

maxlength="16" style="width: 180px; height: 20px;" />

</td>

<tr>

<td>

密码：

</td>

<td>

<input name="password" type="password" id="password"

style="width: 180px; height: 20px;" onblur="check_password()"

onfocus="hideSubmit(),check_name()" size="24" maxlength="16" />

</td>

</tr>

<tr>

<td>

<input type="button" value="检查信息" name="check"

onclick="showSubmit()" />

<input type="submit" value="提交" />

</td>

</tr>

</table>

</form>

</body>


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

function check_name() {

var regname = document.regform.regname.value;

if (regname == "") {

alert("用户名不能为空");

return false;

}

if (!/^.{6,16}$/.test(regname)) {

alert("用户名合法长度为6-16个字符");

return false;

}

if (!/^([a-z]|[A-Z])[/w_]{5,19}$/.test(regname)) {

alert("用户名只能包含_、字母和数字");

return false;

}

return true;

}

function check_password() {

var password = document.regform.password.value;

if (password == "") {

alert("密码不能为空");

return false;

}

if (!/^.{6,16}$/.test(password)) {

alert("密码长度为6-16位");

return false;

}

if (!/^[A-Za-z0-9]+$/.test(password)) {

alert("密码只能由字母和数字组成");

return false;

}

return true;

}

function hideSubmit() {

var div = document.getElementById("valiregnamearea");

}

function showSubmit() {

if (check_name() && check_password() {

document.getElementById("submit").style.visibility = "visible"         }

}


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

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

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

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

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

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

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

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

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

地址：http://blog.csdn.net/bethebest/archive/2010/02/17/5310552.aspx

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

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

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

地址：http://blog.csdn.net/bethebest/archive/2010/02/17/5310550.aspx

结合这三种特技，我们就能设计出用户体验良好的、健壮的表单了。
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航