<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>歡迎進入註冊頁面</title>
<script language="javascript">
function checkname(){
var div = document.getElementById("div1");
div.innerHTML = "";
var name1 = document.form1.text1.value;
if (name1 == "") {
div.innerHTML = "<font color=red>姓名不能為空！</font>";
document.form1.text1.focus();
return false;
}
if (name1.length < 4 || name1.length > 16) {
div.innerHTML = "<font color=red>姓名輸入的長度4-16個字符！</font>";
document.form1.text1.select();
return false;
}
return true;
}
function checkpassword(){
var div = document.getElementById("div2");
div.innerHTML = "";
var password = document.form1.text2.value;
if (password == "") {
div.innerHTML = "<font color=red>密碼不能為空！</font>";
document.form1.text2.focus();
return false;
}
if (password.length < 4 || password.length > 12) {
div.innerHTML = "<font color=red>密碼長度4-12位</font>";
document.form1.text2.select();
return false;
}
return true;
}
function checkrepassword(){
var div = document.getElementById("div3");
div.innerHTML = "";
var password = document.form1.text2.value;
var repass = document.form1.text3.value;
if (repass == "") {
div.innerHTML = "<font color=red>密碼不能為空！</font>";
document.form1.text3.focus();
return false;
}
if (password != repass) {
div.innerHTML = "<font color=red>輸入密碼和確認密碼長度不壹致</font>";
document.form1.text3.select();
return false;
}
return true;
}
function checkEmail(){
var div = document.getElementById("div4");
div.innerHTML = "";
var email = document.form1.text4.value;
var sw = email.indexOf("@", 0);
var sw1 = email.indexOf(".", 0);
var tt = sw1 - sw;
if (email.length == 0) {
div.innerHTML = "<font color=red>電子郵件不能為空</font>";
document.form1.text4.focus();
return false;
}
if (email.indexOf("@", 0) == -1) {
div.innerHTML = "<font color=red>電子郵件格式不正確，必須包含@符號！</font>";
document.form1.text4.select();
return false;
}
if (email.indexOf(".", 0) == -1) {
div.innerHTML = "<font color=red>電子郵件格式不正確，必須包含.符號！</font>";
document.form1.text4.select();
return false;
}
if (tt == 1) {
div.innerHTML = "<font color=red>郵件格式不對。@和.不可以挨著！</font>";
document.form1.text4.select();
return false;
}
if (sw > sw1) {
div.innerHTML = "<font color=red>電子郵件格式不正確，@符號必須在.之前</font>";
document.form1.text4.select();
return false;
}
else {
return true;
}
return ture;
}
function checkPhone(){
var div = document.getElementById("div5");
div.innerHTML = "";
var phone = document.form1.text5.value;
if (phone == "") {
div.innerHTML = "<font color=red>手機號不能為空！</font>";
document.form1.text5.focus();
return false;
}
if (phone.length == 11) {
div.innerHTML = "<font color=red>手機號碼只能為11個字符！</font>";
document.form1.text5.select();
return false;
}
return true;
}
function check(){
if (checkname() && checkpassword() && checkrepassword() && checkEmail()&&checkPhone()) {
var a = document.form1.text1.value;
var b = document.form1.text2.value;
var c = document.form1.text4.value;
var d = document.form1.text5.value;
var e = document.form1.text6.value;
alert("用戶名:"+a+",密碼:"+b+",郵件："+c+",手機號碼是:"+d+".學歷是:"+e+",愛好：");
return true;
}
else {
return false;
}
}
</script>
</head>
<body>
<form name="form1" onSubmit="return check()">
<table border="1" align="center">
<tr>
<td>
<div align="right">用戶名：</div></td>
<td>
<input id="text1" type="text" name="text1" onBlur="check()">
<div id="div1" style="display:inline;"> </div> </td>
</tr>
<tr>
<td>
<div align="right">密碼： </div></td>
<td>
<input id="text2" type="password" name="text2" onBlur="check()">
<div id="div2" style="display:inline"> </div> </td>
</tr>
<tr>
<td>
<div align="right">確認密碼： </div></td>
<td>
<input id="text3" type="password" name="text3" onBlur="check()">
<div id="div3" style="display:inline"> </div> </td>
</tr>
<tr>
<td>
<div align="right">電子郵件地址： </div></td>
<td>
<input id="text4" type="text" name="text4" onBlur="check()">
<div id="div4" style="display:inline"> </div> </td>
</tr>
<tr>
<td>
<div align="right">手機號碼： </div></td>
<td>
<input id="text5" type="text" name="text5" onBlur="check()">
<div id="div5" style="display:inline"> </div> </td>
</tr>
<tr align="center">
<td><div align="right">學歷：</div></td>
<td><div align="left">
<select name="text6">
<option value="初中">初中</option>
<option value="高中">高中</option>
<option value="中專">中專</option>
<option value="大專">大專</option>
<option value="本科">本科</option>
<option value="碩士">碩士</option>
<option value="博士">博士</option>
</select>
</div></td>
</tr>
<tr align="center">
<td align="center"><div align="right">興趣愛好：</div></td>
<td align="center">
<input type="checkbox" name="text11" value="籃球">
籃球
<input type="checkbox" name="checkbox12" value="音樂">
音樂
<input type="checkbox" name="checkbox13" value="足球">
足球
<input type="checkbox" name="checkbox14" value="其他">
其他</td>
</tr>
<tr align="center">
<td align="center"><input type="submit" value="提交" name="text8">
<input type="reset" value="重置" name="text9"></td>
<td align="center">?</td>
</tr>
</table>
</form>
</body>
</html>