<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
function check() {
var submitFlg = true;
//驗證姓名
var regpname={regstr:/^[\u4e00-\u9fa5\w]{1,6}$/,tip:'請輸入1-6位的漢字、英文、數字、下劃線'};
var pname= document.getElementById("pname").value;
var spans = document.getElementById("pname").parentNode.getElementsByTagName("span");
spans[0].innerHTML=""
if(!regpname.regstr.test(pname)){
spans[0].innerHTML="<font color='red'>"+regpname.tip+"<font>";
submitFlg = false;
}
//驗證用戶名
var regusername={regstr:/^[\w]{1,6}$/,tip:'請輸入1-6位的英文、數字、下劃線'};
var username= document.getElementById("username").value;
var spans = document.getElementById("username").parentNode.getElementsByTagName("span");
spans[0].innerHTML="";
if(!regusername.regstr.test(username)){
spans[0].innerHTML="<font color='red'>"+regusername.tip+"<font>";
submitFlg = false;
}
//驗證密碼
var regpassword={regstr:/^[\w@#*]{1,6}$/,tip:'請輸入1-6位的英文、數字、下劃線、@、#、*'};
var password= document.getElementById("password").value;
var spans = document.getElementById("password").parentNode.getElementsByTagName("span");
spans[0].innerHTML="";
if(!regpassword.regstr.test(password)){
spans[0].innerHTML="<font color='red'>"+regpassword.tip+"<font>";
submitFlg = false;
}
var repassword=document.getElementById("repassword").value;
var spans = document.getElementById("repassword").parentNode.getElementsByTagName("span");
spans[0].innerHTML="";
if(repassword!=password){
spans[0].innerHTML="<font color='red'>"+"兩次輸入的密碼不一致"+"<font>";
submitFlg = false;
}
//驗證郵箱
var regemail={regstr:/^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/,tip:'請確認郵箱格式'};
var email= document.getElementById("email").value;
var spans = document.getElementById("email").parentNode.getElementsByTagName("span");
spans[0].innerHTML="";
if(!regemail.regstr.test(email)){
spans[0].innerHTML="<font color='red'>"+regemail.tip+"<font>";
submitFlg = false;
}
//驗證郵箱
var regemail={regstr:/^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/,tip:'請確認郵箱格式'};
var email= document.getElementById("email").value;
var spans = document.getElementById("email").parentNode.getElementsByTagName("span");
spans[0].innerHTML="";
if(!regemail.regstr.test(email)){
spans[0].innerHTML="<font color='red'>"+regemail.tip+"<font>";
submitFlg = false;
}
//驗證電話
var regphone={regstr:/^1\d{10}$/,tip:'請輸入11位的手機號'};
var phone= document.getElementById("phone").value;
var spans = document.getElementById("phone").parentNode.getElementsByTagName("span");
spans[0].innerHTML="";
if(!regphone.regstr.test(phone)){
spans[0].innerHTML="<font color='red'>"+regphone.tip+"<font>";
submitFlg = false;
}
return submitFlg;
}
</script>
</head>
<body>
<form action="success.html" onsubmit="return check()">
<table>
<tr>
<td><font color="red">*</font>姓名</td>
<td><input type="text" id="pname" name="pname"></input><span></span></td>
</tr>
<tr>
<td><font color="red">*</font>用戶名</td>
<td><input type="text" id="username" name="username"></input><span></span></td>
</tr>
<tr>
<td><font color="red">*</font>密碼</td>
<td><input type="text" id="password" name="password"></input><span></span></td>
</tr>
<tr>
<td><font color="red">*</font>確認密碼</td>
<td><input type="text" id="repassword" name="repassword"></input><span></span></td>
</tr>
<tr>
<td>郵箱</td>
<td><input type="text" id="email" name="email"></input><span></span></td>
</tr>
<tr>
<td>性別</td>
<td>
<input type="radio" id="sex" name="sex" value="1">男
<input type="radio" id="sex" name="sex" value="2">女
</td>
</tr>
<tr>
<td>電話</td>
<td><input type="text" id="phone" name="phone"></input><span></span></td>
</tr>
<tr>
<td>地區</td>
<td>
<select name = "area">
<option value="1">長春</option>
<option value="2">吉林</option>
</select>
</td>
</tr>
</table>
<input type="submit" value="註冊">
</form>
</body>
</html>
還需在相同目錄下新建一個success.html文件，用來顯示form提交後跳轉的頁面。