本注冊頁面未設置編碼方式和兼容性，已測試，在Chrome瀏覽器顯示正常
<!DOCTYPE html>
<html>
<head>
<title>注冊頁面</title>
<style>
.pg_header{
position: fixed;
height: 48px;
top: 0;
left: 0;
right: 0;
background-color: #2459a2;
line-height: 48px;
}
.pg_header .logo{
margin: 0 auto;
float: left;
width: 200px;
text-align: center;
line-height: 48px;
font-size: 28px;
color: white;
}
.pg_dl{
left: 400px;
display: inline-block;
padding: 0 40px;
color: white;
}
.pg_header .pg_dl:hover{
background-color: #2459fb;
cursor: pointer;
}
.left{
margin-top: 20px;
width: 400px;
display: inline-block;
float: left;
}
.pg_body{
margin-top: 50px;
font-size: 18px;
display: inline-block;
width: 200px;
}
.pg_body .menu{
width: 800px;
padding: 15px;
float: left;
font-weight: bold;
}
input[type="text"]{
width: 200px;
height: 25px;
border-radius: 6px;
}
input[type="password"]{
width: 200px;
height: 25px;
border-radius: 6px;
}
input[type="button"]{
background-color: #555555;
border: none;
color: white;
padding: 12px 29px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 17px;
margin: 4px 2px;
cursor: pointer;
border-radius: 4px;
}
input[type="submit"]{
background-color: #555555;
border: none;
color: white;
padding: 12px 29px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 17px;
margin: 4px 2px;
cursor: pointer;
border-radius: 4px;
}
.kong{
margin-top: -54px;
margin-left: 200px;
float:left;
padding: 15px;
}
.img{
width: 50px;
height: 40px;
}
.can{
width: 1220px;
height: 40px;
line-height: 40px;
margin: 0 auto;
text-align: center;
display: inline-block;
}
.tian{
color: red;
float: right;
font-size: 12px;
margin-right: -120px;
margin-top: -25px;
}
</style>
</head>
<body id="i88" style="margin: 0">
<div class = "pg_header">
<a class = "logo">LOGO</a>
<a class="pg_dl" id="i77">注冊</a>
</div>
<form name="tijiao" method="post" onsubmit="return check()" action="winford.top">
<div class="left"></div>
<div class="pg_body">
<div class="menu">用戶名:</div>
<div class="kong">
<input id="text1" type="text" name="01" placeholder="請輸入用戶名" onblur="check()"><span id="div1" class="tian" style="margin-top: 4px">*(為必填)<span>
</div>
<div class="menu">真實姓名:</div>
<div class="kong">
<input id="i2" type="text" name="01">
</div>
<div class="menu">性別:</div>
<div class="kong" style="width:200px;">
男<input type="radio" name="gender" value="1">
女 <input type="radio" name="gender" value="2">
</div>
<div class="menu">密碼:</div>
<div class="kong">
<input id="text2" type="password" name="02" onblur="check()">
<span id="div2" class="tian" style="margin-top: -25px">*(為必填)<span>
</div>
<div class="menu">確認密碼:</div>
<div class="kong">
<input id="text3" type="password" name="01" onblur="check()">
<span id="div3" class="tian">*(為必填)<span>
</div>
<div class="menu">電話號碼:</div>
<div class="kong">
<input id="i5" type="text" name="01">
</div>
<div class="menu">郵箱地址:</div>
<div class="kong">
<input id="text4" type="text" name="01" onblur="check()">
<span id="div4" class="tian">*(為必填)<span>
</div>
<div class="menu">頭像上傳: </div>
<div class="kong">
<input type="file" name="file" value="選擇頭像" accept="image/*">
</div>
<div class="menu">愛好:</div>
<div class="kong" style="width: 300px;">
撩妹 <input type="checkbox" name="favor">
寫代碼 <input type="checkbox" name="favor">
籃球 <input type="checkbox" name="favor">
足球 <input type="checkbox" name="favor">
</div>
<div class="menu">個人簽名:</div>
<div class="kong">
<textarea name="meno" style="width: 280px;height: 40px;">
有點懶。。。。
</textarea>
</div>
</div>
<div class="can">
<input id="i111" type="submit" name="002" value="注 冊">
<p style="width: 200px;display: inline-block;"></p>
<input id="i222" type="button" name="004" value="取 消">
</div>
</form>
<script type="text/javascript">
//刷新or取消
document.getElementById('i77').onclick = function(){
location.reload();
}
document.getElementById('i222').onclick = function(){
location.reload();
}
//用戶名驗證
function checkname(){
var div = document.getElementById("div1");
div.innerHTML = "";
var name1 = document.tijiao.text1.value;
if (name1 == "") {
div.innerHTML = "用戶名不能為空！";
document.tijiao.text1.focus();
return false;
}
if (name1.length < 4 || name1.length > 16) {
div.innerHTML = "長度4-16個字符";
document.tijiao.text1.select();
return false;
}
var charname1 = name1.toLowerCase();
for (var i = 0; i < name1.length; i++) {
var charname = charname1.charAt(i);
if (!(charname >= 0 && charname <= 9) && (!(charname >= 'a' && charname <= 'z')) && (charname != '_')) {
div.innerHTML = "用戶名包含非法字符";
document.form1.text1.select();
return false;
}
}
return true;
}
//密碼驗證
function checkpassword(){
var div = document.getElementById("div2");
div.innerHTML = "";
var password = document.tijiao.text2.value;
if (password == "") {
div.innerHTML = "密碼不能為空";
document.tijao.text2.focus();
return false;
}
if (password.length < 4 || password.length > 16) {
div.innerHTML = "密碼長度為4-16位";
document.tijiao.text2.select();
return false;
}
return true;
}
function checkrepassword(){
var div = document.getElementById("div3");
div.innerHTML = "";
var password = document.tijiao.text2.value;
var repass = document.tijiao.text3.value;
if (repass == "") {
div.innerHTML = "密碼不能為空";
document.tijiao.text3.focus();
return false;
}
if (password != repass) {
div.innerHTML = "密碼不一致";
document.tijiao.text3.select();
return false;
}
return true;
}
//郵箱驗證
function checkEmail(){
var div = document.getElementById("div4");
div.innerHTML = "";
var email = document.tijiao.text5.value;
var sw = email.indexOf("@", 0);
var sw1 = email.indexOf(".", 0);
var tt = sw1 - sw;
if (email.length == 0) {
div.innerHTML = "郵箱不能為空";
document.tijiao.text5.focus();
return false;
}
if (email.indexOf("@", 0) == -1) {
div.innerHTML = "必須包含@符號";
document.tijiao.text5.select();
return false;
}
if (email.indexOf(".", 0) == -1) {
div.innerHTML = "必須包含.符號";
document.tijiao.text5.select();
return false;
}
if (tt == 1) {
div.innerHTML = "@和.不能一起";
document.tijiao.text5.select();
return false;
}
if (sw > sw1) {
div.innerHTML = "@符號必須在.之前";
document.tijiao.text5.select();
return false;
}
else {
return true;
}
return ture;
}
function check(){
if (checkname() && checkpassword() && checkrepassword() && checkEmail()) {
return true;
}
else {
return false;
}
}
</script>
</body>
</html>
