教你一天玩转JavaScript(五)——使用JavaScript完成注册页面表单提示及校验

使用JavaScript完成注册页面表单提示及校验

还记得我之前写过的教你一天玩转JavaScript(二)——完成对注册页面的数据的简单校验一文吗？很明显这种以弹出对话框的形式进行表单校验的方式不是特别友好！更好地做法是可以将错误信息显示到文本框的后面，而且当光标落入到文本框的时候，会有提示的信息。

如要使用JavaScript完成注册页面表单提示及校验，不可避免地要知道下面两个知识点：

JavaScript的输出

JavaScript的输出有两种形式，一种是：

document.getElementById("...").innerHTML = "HTML的代码";

还有一种是写到文档输出：

document.write("";

不过我们多用第一种方式。

JavaScript的事件

onfocus：元素获得焦点

onblur：元素失去焦点

onsubmit：表单提交的时候提交按钮被点击

了解上述知识点之后，下面我就按如下步骤来使用JavaScript完成注册页面表单提示及校验：

创建一个【使用JS完成表单的简单的数据校验.html】的html文档

在要去校验的文本框上添加事件

触发函数

在函数中向文本框后的html的区域中写入一段提示的内容

首先我从自己编写的注册页面中抽出核心代码如下：

<form action="../index.html" method="post" onsubmit="return checkForm();">
<table border="0" width="100%" cellspacing="15">
<tr>
<td>用户名</td>
<td><input type="text" id="username" name="username" onfocus="tips('username','用户名需要是字母或数字组成！')" onblur="checkUsername()"><span id="usernameSpan"></span></td>
</tr>
<tr>
<td>密码</td>
<td><input type="password" id="password" name="password" onfocus="tips('password', '密码至少6位！')" onblur="checkPassword()"><span id="passwordSpan"></span></td>
</tr>
<tr>
<td>确认密码</td>
<td><input type="password" id="repassword" name="repassword"></td>
</tr>
<tr>
<td>性别</td>
<td><input type="radio" name="sex" value="男">男<input type="radio" name="sex" value="女">女</td>
</tr>
<tr>
<td>籍贯</td>
<td>
<select name="province">
<option>-请选择-</option>
</select>
<select name="city">
<option>-请选择-</option>
</select>
</td>
</tr>
<tr>
<td>爱好</td>
<td>
<input type="checkbox" name="hobby" value="篮球" />篮球
<input type="checkbox" name="hobby" value="足球" />足球
<input type="checkbox" name="hobby" value="排球" />排球
<input type="checkbox" name="hobby" value="羽毛球" />羽毛球
</td>
</tr>
<tr>
<td>邮箱</td>
<td><input type="text" id="email" name="email"></td>
</tr>
<tr>
<td colspan="2"><input type="submit" value="注册"></td>
</tr>
</table>
</form>

接着就要编写JavaScript代码完成注册页面表单提示及校验：

<script>
function tips(id, content) {
document.getElementById(id + "Span").innerHTML = "<font color='red'>" + content + "</font>";
}

function checkUsername() {
document.getElementById("usernameSpan").innerHTML = "<font color='green'>用户名可以使用！</font>";
}

function checkPassword() {
document.getElementById("passwordSpan").innerHTML = "<font color='green'>密码可以使用！</font>";
}

function checkForm() {
// 判断用户名不能为空
var username = document.getElementById("username").value;
if (username == "") {
document.getElementById("usernameSpan").innerHTML = "<font color='red'>用户名不能为空！</font>";
return false;
}

// 判断密码不能为空
var password = document.getElementById("password").value;
if (password == "") {
document.getElementById("passwordSpan").innerHTML = "<font color='red'>密码不能为空！</font>";
return false;
}
}
</script>

我也只是稍微判断了一下用户名和密码输入框，给大家抛砖引玉，大家可仿照上面的代码对需要校验的输入框进行细腻的判断，在此并不赘述。

这样，在Firefox浏览器上运行【使用JS完成表单的简单的数据校验.html】页面，效果如下：



如需完整代码，可参考教你一天玩转JavaScript(五)——使用JavaScript完成注册页面表单提示及校验！

总结

JavaScript事件可参考JavaScript的事件(Events)对象，如下：



以下事件比较常用：

onload：某个页面或图像被完成加载

onclick：鼠标点击某个对象

onsubmit：提交按钮被点击

onfocus：元素获得焦点

onblur：元素失去焦点

onchange：用户改变域的内容，还有下拉列表框改变之后也可触发该事件

ondblclick：鼠标双击某个对象

键盘操作事件

onkeydown：某个键盘的键被按下

onkeyup：某个键盘的键被松开

onkeypress：某个键盘的键被按下或按住

鼠标操作事件

onmousemove：鼠标被移动

onmouseout：鼠标从某元素移开

onmouseover：鼠标被移到某元素之上

onmousedown：某个鼠标按键被按下

onmouseup：某个鼠标按键被松开