<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<title>注册页面</title>
<style type="text/css">
.grayText{
color: gray;
}
#table td{
width:40px;
height:19px;
background-color:#F3F3F3;
border:1px solid #D0D0D0;
color:#BBBBBB;
line-height:9px;
}
</style>
<script type="text/javascript">
var accountElement ;
var passwordElement;
var ageElement;
var formElement;
//检查value是否符合邮箱格式
function checkAccount(value){
return /^(\w)+(\.\w+)*@(\w)+((\.\w+)+)$/.test(value);
}
window.onload=function(){
//1 账号：默认的灰色提示文本，是否符合邮箱格式
accountElement = document.getElementById("account");
//默认的灰色提示文本
accountElement.onfocus=function(){
if(this.className=="grayText"){
this.className=null;
this.value="";
}
}
accountElement.onblur=function(){
if(!this.value){
this.className="grayText"
this.value="请使用邮箱注册";
}
if(!checkAccount(this.value)){
this.style.backgroundColor="coral";
}else{
this.style.backgroundColor="lightgreen";
}
}
//2 检查密码的强度
passwordElement = document.getElementById("password");
passwordElement.onkeyup=function(){
var level = checkPasswordLevel(this.value);
switch (level){
case 1:{
document.getElementById("td1").style.backgroundColor="coral";
document.getElementById("td2").style.backgroundColor=null;
document.getElementById("td3").style.backgroundColor=null;
break;
}
case 2:{
document.getElementById("td1").style.backgroundColor="lightgreen";
document.getElementById("td2").style.backgroundColor="lightgreen";
document.getElementById("td3").style.backgroundColor=null;
break;
}
case 3:{
document.getElementById("td1").style.backgroundColor="green";
document.getElementById("td2").style.backgroundColor="green";
document.getElementById("td3").style.backgroundColor="green";
break;
}
}
}
//3 检查年龄：用户不可以输入非数字的字符，年龄需要在[0-150]之间
ageElement = document.getElementById("age");
ageElement.onkeydown=function(){
if(event.keyCode<48 || event.keyCode>57){
if(event.keyCode==8){
return true;
}
return false;
}
}
ageElement.onkeyup=function(){
var result = checkAge(this.value);
if(result){
this.style.backgroundColor="lightgreen";
}else{
this.style.backgroundColor="coral";
}
}
//4 整个表单的检查
formElement = document.getElementById("form");
formElement.onsubmit=function(){
var message = "";
//检查账号是否符合邮箱规则
var result = checkAccount(accountElement.value);
if(!result){
message += "账号不符合邮箱规则\n"
}
//检查密码强度
result = checkPasswordLevel(passwordElement.value);
if(result==1){
message += "密码强度太弱\n"
}
//检查年龄
result = checkAge(ageElement.value);
if(!result){
message += "年龄需要在[0-150]之间";
}
if(message){
alert(message);
return false;
}
}
}
function checkAge(value){
if(!value){
return false;
}
var age = parseInt(value);
if(age<0 || age>150){
return false;
}else{
return true;
}
}
//检查密码强度 1--弱，2--中，3--强
function checkPasswordLevel(value){
if(!value){
return 1;
}
if(value.length<6){
return 1;
}
if(value.length>=8 && /[0-9]/.test(value) && /[a-z]/.test(value) && /[A-z]/.test(value)){
return 3;
}
return 2;
}
</script>
</head>
<body>
<form id="form" action="register">
<label for="account">账号：</label>
<input id="account" class="grayText" type="text" name="account" value="请使用邮箱注册" /><br/>
<label for="password">密码：</label>
<input id="password" type="password" name="password" />
<table id="table" border="0" cellpadding="0" cellspacing="0" style="display: inline-table;">
<tr align="center">
<td id="td1">弱</td>
<td id="td2">中</td>
<td id="td3">强</td>
</tr>
</table>
<br/>
<label for="age">年龄：</label>
<input id="age" type="text" name="age" /><br/>
<label>性别：</label>
<input type="radio" name="gender" checked="checked" value="男"/>男
<input type="radio" name="gender" value="女"/>女<br/>
<label>爱好：</label>
<input type="checkbox" name="hobbies" value="读书" />读书
<input type="checkbox" name="hobbies" value="音乐" />音乐
<input type="checkbox" name="hobbies" value="跑步" />跑步
<input type="checkbox" name="hobbies" value="旅行" />旅行<br/>
<label>学历：</label>
<select name="degree">
<option value="本科">本科</option>
<option value="中学">中学</option>
<option value="大专">大专</option>
<option value="研究生">研究生</option>
</select>
<br/>
<input type="reset" value="重置" />
<input type="submit" value="注册" />
</form>
</body>
</html>
