? 本页面运用了HTML,CSS,JavaScript，其中，HTML,CSS用于创建表单并进行样式设计，JavaScript用于进行表单验证。
?效果图如下：
?登录，注册页面.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="登录，注册页面.css">
<title>动态化网页设计</title>
<script language="javascript" src="登录，注册页面.js"></script>
</head>
<body>
<form action="#" name="f1" method="get" onsubmit="return check()">
<table width="50%" class="default">
<tr class="title">
<td class="header" colspan="2">
请注册
</td>
</tr>
<tr>
<td class="item">用户ID:</td>
<td><input type="text" name="userid" id="userid" size="20" oncheck="checkid()">
<span class="checktext1">6-8位</span>
</td>
</tr>
<tr>
<td class="item">用户名:</td>
<td><input type="text" name="username" id="username" size="20" onchange="checkuse()">
<span class="checktext2">2-10位</span>
</td>
</tr>
<tr>
<td class="item">口令:</td>
<td><input type="text" name="userkouling" id="userkouling" size="18" onchange="checkkouling()">
<span class="checktext3">6-8位，不能与用户名相同</span>
</td>
</tr>
<tr>
<td class="item">确认口令:</td>
<td><input type="text" name="querenkouling" id="querenkouling" size="18" oncheck="checkquerenkouling">
</td>
</tr>
<tr>
<td class="item">生日:</td>
<td><input type="text" name="userbirthday" id="userbirthday" size="22" onblur="checkDate()">
<span>格式为：1988-1-1</span>
</td>
</tr>
<tr>
<td class="item">学历:</td>
<td><input type="radio" name="xueli" value="1" onchange="checkXueli()">专科
<input type="radio" name="xueli" value="2" onchange="checkXueli()">本科
<input type="radio" name="xueli" value="3" onchange="checkXueli()">硕士研究生
<input type="radio" name="xueli" value="4" onchange="checkXueli()">博士研究生
<input type="radio" name="xueli" value="5" onchange="checkXueli()">其他
</td>
</tr>
<tr>
<td class="item">地区:</td>
<td>
<select id="userplace" emptyInfo="请选择地区。" onblur="checkplace()">
<option value="1">东北</option>
<option value="2">华北</option>
<option value="3">华东</option>
<option value="4">华中</option>
<option value="5">华南</option>
<option value="6">西南</option>
<option value="7">西北</option>
</select>
</td>
</tr>
<tr>
<td class="item">E-mail:</td>
<td><input type="text" name="email" id="email" size="20" onchange="checkemail()"></td>
</tr>
<tr>
<td class="item">地址:</td>
<td><input type="text" name="space" id="space" size="20" onchange="checkspace()"></td>
</tr>
<tr>
<td class="item">电话:</td>
<td><input type="text" name="tel" size="20">
<span>数字和连字符，例如88223322-123</span>
</td>
</tr>
<tr>
<td class="item">备注:</td>
<td><textarea name="beizhu" id="beizhu" rows="5" cols="20" emptyInfo="请填写备注。"
onchange="checkbeizhu()"></textarea></td>
</tr>
<tr>
<td><input type="submit" value="提交" class="btn"></td>
<td><input type="reset" value="重置" class="btn"></td>
</tr>
</table>
</form>
</body>
</html>?
登录，注册页面.css?
table {
margin: 30px;
background-color: rgb(212, 237, 100);
}
td {
height: 30px;
}
td.header {
font-size: 20px;
font-weight: bold;
}
td.item {
text-align: left;
width: 12%;
}
/* 按钮 */
.btn {
background: url("../images/btn_bg.gif");
background-repeat: repeat-x;
border: 3px double #333333;
border-color: #909090;
color: #333333;
padding: 0 2px;
font-size: 12px;
height: 23px;
cursor: hand;
margin: 3px;
}?登录，注册页面.js
function checkid() {
var check;
var userid = document.getElementById("userid").value;
if (userid.length > 8 || userid.length < 6) {
alert("用户ID输入不合法，请重新输入！");
document.getElementById("userid").focus();
check = false;
} else {
document.getElementById("checktext1").innerHTML = " 用户ID符合条件";
check = true;
}
return check;
}
function checkuse() {
var check;
var username = document.getElementById("username").value;
if (username.length > 10 || username.length < 2) {
alert("用户名输入不合法，请重新输入！");
document.getElementById("username").focus();
check = false;
} else {
document.getElementById("checktext1").innerHTML = "用户符合条件";
check = true;
}
return check;
}
function checkkouling() {
var check;
var userkouling = document.getElementById("userkouling").value;
if (username.length > 8 || username.length < 6 || userkouling == username) {
alert("口令输入不合法，请重新输入！");
document.getElementById("userkouling").focus();
check = false;
}
return check;
}
function checkquerenkouling() {
var check;
var userquerenkouling = document.getElementById("userquerenkouling").value;
if (userquerenkouling != userkouling) {
alert("口令输入错误，请重新输入！");
document.getElementById("userquerenname").focus();
check = false;
} else {
alert("口令已确认!");
check = true;
}
return check;
}
function checkDate() {
var birthday = document.getElementById('userbirthday').value;
if (!/^\d{4}([\/\-]?)\d{1,2}\1\d{1,2}$/.test(userirthday)) {
alert('生日格式错误');
return false;
}
}
function checkXueli() {
var check;
var xueli = "";
var xueli = document.getElementsByName("xueli");
for (var i = 0; i < xueli.length; ++i) {
if (xueli[i].checked)
xueli = xueli[i].value;
}
if (xueli == "") {
alert("请选择学历！");
check = false;
} else {
alert("学历已选择");
check = true;
}
return check;
}
function checkplace() {
var check;
if (document.getElementById("userplace").selectedIndex == 0) {
alert("请选择地区！");
document.getElementById("userplace").focus();
check = false;
} else {
alert("地区已选择")
check = true;
}
return check;
}
function checkemail() {
var check;
var e1 = document.getElementById("email").value.indexOf("@", 0);
var e2 = document.getElementById("email").value.indexOf(".", 0);
if (email == "" || (e1 == -1 || e2 == -1) || e2 < e1) {
alert("E-mail输入错误!");
document.getElementById("email").focus();
check = false;
} else {
alert("E-mail格式正确")
check = true;
}
return check;
}
function checkspace() {
if (space.length == 0) {
alert("地址不能为空!");
return false;
}
return true;
alert("地址不能为空!");
}
function checkbeizhu() {
if (beizhu.length == 0) {
alert("备注不能为空!");
return false;
}
return true;
alert("备注不能为空!");
}
function check() {
var check = checkid() && checkuse() && checkkouling && checkquerenkouling && checkXueli() && checkplace() && checkemail() && checkspace && checkbeizhu();
if (check) {
alert("格式正确");
}
else {
alert("格式错误");
}
}