<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>注册表</title>
<script type="text/javascript" src="check.js">
</script>
</head>
<body>
<!-- 注册表单-->
<form action="" method="get" id="form_adminstration">
<table id="adiminstration" align="center">
<tr width="600">
<td colspan="3" align="center"><font size="+2"><b>注册 </b></font></td>
</tr>
<tr width="600">
<td align="right" width="200">用户名:</td>
<td align="left" width="200"><input type="text" id="userName" align="left" onblur="CheckUserName()" /></td>
<td width="200"><div align="left" id="userNameAttention"></div></td>
</tr>
<tr width="600">
<td align="right" width="200">密码:</td>
<td align="left" width="200"><input type="password" id="password" align="left" onblur="CheckPassword()"/></td>
<td width="200"><div align="left" id="passwordAttention"></div></td>
</tr>
<tr width="600">
<td align="right" width="200">确认密码:</td>
<td align="left" width="200"><input type="password" id="passwordConfirm" align="left" onblur="CheckPasswordConfirm()" /></td>
<td width="200"><div align="left" id="passwordConfirmAttention"></div></td>
</tr>
<tr width="600">
<td align="right" width="200">邮箱:</td>
<td align="left" width="200"><input type="text" id="mailbox" align="left" onblur="CheckMailbox()"/></td>
<td width="200"><div align="left" id="mailboxAttention"></div></td>
</tr>
<tr width="600">
<td colspan="3" align="center">
<label><input type="button" id="confirm" value="注册" style="90px" onclick="Check()"/></label>
<label><input type="reset" id="concel" value="取消" style="90px" /></label>
</td>
</tr>
</table>
</form>
</body>
</html>
// JavaScript Document
<!-- 检测用户名是否为空 -->
function CheckUserName()
{
if(document.getElementById("userName").value == "")
{
document.getElementById("userNameAttention").innerHTML = "<font>用户名不能为空</font>";
}
else
{
document.getElementById("userNameAttention").innerHTML = "<font></font>";
}
}
<!-- 检测密码是否为空 -->
function CheckPassword()
{
if(document.getElementById("password").value == "")
{
document.getElementById("passwordAttention").innerHTML = "<font>密码不能为空</font>";
}
else
{
document.getElementById("passwordAttention").innerHTML = "<font></font>";
}
}
<!-- 检测确认密码是否为空，以及两次输入的密码是否一致 -->
function CheckPasswordConfirm()
{
if(document.getElementById("passwordConfirm").value == "")
{
document.getElementById("passwordConfirmAttention").innerHTML = "<font>确认密码不能为空</font>";
}
else
{
document.getElementById("passwordConfirmAttention").innerHTML = "<font></font>";
if(document.getElementById("passwordConfirm").value != document.getElementById("password").value)
{
document.getElementById("passwordConfirmAttention").innerHTML = "<font>密码输入不一致</font>";
}
else
{
document.getElementById("passwordConfirmAttention").innerHTML = "<font></font>";
}
}
}
<!-- 检测邮箱是否为空以及格式是否正确 -->
function CheckMailbox()
{
if(document.getElementById("mailbox").value == "")
{
document.getElementById("mailboxAttention").innerHTML = "<font>邮箱不能为空</font>";
}
else
{
document.getElementById("mailboxAttention").innerHTML = "<font></font>";
var reg = /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+((.[a-zA-Z0-9_-]{2,3}){1,2})$/;
if(!reg.test(document.getElementById("mailbox").value))
{
document.getElementById("mailboxAttention").innerHTML = "<font>邮箱格式不正确</font>";
}
else
{
document.getElementById("mailboxAttention").innerHTML = "<font></font>";
}
}
}
<!-- 检查所有的是否为空，以便确定提交-->
function Check()
{
CheckUserName();
CheckPassword();
CheckPasswordConfirm();
CheckMailbox();
var reg = /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+((.[a-zA-Z0-9_-]{2,3}){1,2})$/;
if((document.getElementById("userName").value!="")&&(document.getElementById("password").value != "")
&&(document.getElementById("passwordConfirm").value != "")&&(document.getElementById("mailbox").value != "")
&&(reg.test(document.getElementById("mailbox").value)))
{
alert("提交成功");
}
else
{
alert("提交错误");
}
}