<!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=gb2312" />
<title>用户注册</title>
<style type="text/css">
ul {list-style-type:none;}
ul li {margin-bottom:15px;}
.myclock{font-size:12px;color:#0000CC;}
.front_input {width:150px;display:block;text-align:right;}
.front_input,ul li input {float:left;}
.after_input {margin-left:5px;color:#FF0000;font-size:14px;folat:left;}
ul input {width:200px;height:18px;}
.front_input {clear:both;}
</style>
<script type="text/javascript">
function showtime()
{
var now = new Date();
var year = now.getFullYear();
var month = now.getMonth()+1;
var dath = now.getDate();
var hour = now.getHours();
var mi = now.getMinutes();
var se = now.getSeconds();
if (mi < 10) //如果分钟只有1位,补0显示
mi="0"+mi;
if (se < 10) //如果秒数只有1位,补0显示
se="0"+se;
if(hour<12)
document.myform.myclock.value=hour+":"+mi+":"+se+" AM";
if(hour>12)
document.myform.myclock.value=(hour-12)+":"+mi+":"+se+" PM";
var myTime = setTimeout("showtime()",1000);
//每1000毫秒,调用函数显示
}
function check_username(){
var username;
username = document.getElementById('username').value;
//username = username.Trim();
if (username == "") {
document.getElementById('username_error').innerHTML = "请输入用户名";
} else {
if (/^\w{6,20}$/.test(username)) {
document.getElementById('username_error').innerHTML = "";
} else {
document.getElementById('username_error').innerHTML = "请输入6 ~ 20 字符【0-9】【a-z-A-Z】";
}
}
}
/**
*检查Email
*/
//---------------------------------------------------------------------------
function check_email(){
var email;
email = document.getElementById('email').value;
// email = email.Trim();
if (email == "") {
document.getElementById('email_error').innerHTML = "请输入Email";
} else {
if (/^[\w-]+[\.]*[\w-]+[@][\w\-]{1,}([.]([\w\-]{1,})){1,3}$/.test(email)) {
document.getElementById('email_error').innerHTML = "";
} else {
document.getElementById('email_error').innerHTML = "请输入有效的Email地址";
}
}
}
/**
*检查密码
*/
//---------------------------------------------------------------------------
function check_pass(){
var pass;
pass = document.getElementById('pass').value;
// pass = pass.Trim();
_pass = pass;
if (pass == "") {
document.getElementById('pass_error').innerHTML = "请输入密码";
} else {
if (/^\w{6,20}$/.test(pass)) {
document.getElementById('pass_error').innerHTML = "";
} else {
document.getElementById('pass_error').innerHTML = "请输入6 ~ 20 字符【0-9】【a-z-A-Z】";
}
}
}
/**
*检查rpass
*/
//---------------------------------------------------------------------------
function check_rpass(){
var rpass;
rpass = document.getElementById('rpass').value;
// rpass = rpass.Trim();
if (rpass == "") {
document.getElementById('rpass_error').innerHTML = "请输入确认密码";
}
else if (rpass !=_pass) {
document.getElementById('rpass_error').innerHTML = "密码不一致";
}
else {
document.getElementById('rpass_error').innerHTML = ""
}
}
//-----------------------------------------------------------------------------
function check_tel(){
var tel;
tel = document.getElementById('tel').value;
// tel = tel.Trim();
if (tel== "") {
document.getElementById('tel_error').innerHTML = "请输入电话号码";
} else {
if (tel.length==11) {
document.getElementById('tel_error').innerHTML = "";
} else {
document.getElementById('tel_error').innerHTML = "请输入11位数字";
}
}
}
//---------------------------------------------------------------------------
function regist(){
var username_error=document.getElementById('username_error').innerHTML;
var pass_error=document.getElementById('pass_error').innerHTML;
var rpass_error=document.getElementById('rpass_error').innerHTML;
var email_error=document.getElementById('email_error').innerHTML;
var tel_error=document.getElementById('tel_error').innerHTML;
var username=document.getElementById('username').value;
var pass=document.getElementById('pass').value;
var rpass=document.getElementById('rpass').value;
var email=document.getElementById('email').value;
var email=document.getElementById('tel').value;
//判断错误信息全部为空并且文本框全部不为空
if ((username_error == "" && pass_error == "" && rpass_error == "" && email_error == "")&&(username != "" && pass != "" && rpass != "" && email != "")) {
alert ("恭喜,注册成功!");
} else {
alert ("注册信息填写错误,请仔细检查更正后再提交");
}
}
</script>
</head>
<body οnlοad="showtime();" bgcolor="#FFCC66">
用户注册表单
<hr>
<form name="myform" method="post">
<input class="myclock" name="myclock" size="20" disabled/>
<ul>
<li>
<span class="front_input">用户名:</span><input id="username" type="text" class="_input" οnfοcus="check_username()" οnblur="check_username()" /><span id="username_error" class="after_input"></span>
</li>
<li>
<span class="front_input">密码:</span><input id="pass" type="password" class="_input" οnfοcus="check_pass()" οnblur="check_pass()" /><span id="pass_error" class="after_input"></span>
</li>
<li>
<span class="front_input">确认密码:</span><input id="rpass" type="password" class="_input" οnfοcus="check_rpass()" οnblur="check_rpass()" /><span id="rpass_error" class="after_input"></span>
</li>
<li>
<span class="front_input">职业:</span><select name="sel" >
<option value="">教师</option>
<option value="">学生</option>
<option value="">职工</option>
<option value="">农民</option>
<option value="">机关干部</option>
<option value="">歌手</option>
</select><br>
</li>
<li>
<span class="front_input">邮箱:</span><input id="email" type="text" class="_input" οnfοcus="check_email()" οnblur="check_email()" /><span id="email_error" class="after_input"></span>
</li>
<li>
<span class="front_input">电话:</span><input id="tel" type="text" class="_input" οnfοcus="check_tel()" οnblur="check_tel()" /><span id="tel_error" class="after_input"></span>
</li>
<li>
<span class="front_input"> 个人简介:</span>
<textarea id="intro" cols="30" rows="4"></textarea>
</li>
</ul>
<div style="clear:both;margin-left:330px;margin-top:50px;">
<input type="submit" value="注册" οnclick="regist()">
<input type="reset" value="重置">
</form>
</div>
</body>
</html>