<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script>
function checkUsername(){
var usernameReg=/^[a-zA-Z0-9]{6,10}$/;
var username = document.getElementById("username").value;
var usernameSpan =document.getElementById("usernamespan");
if(usernameReg.test(username)){
usernameSpan.style.color="green";
usernameSpan.innerHTML="√";
return true;
}else{
usernameSpan.style.color="red";
usernameSpan.innerHTML="× 用戶名錯誤";
return false;
}
}
function checkPassword(){
var passwordReg=/^[a-zA-Z0-9]{6,10}$/;
var password = document.getElementById("password").value;
var passwordSpan =document.getElementById("passwordspan");
if(passwordReg.test(password)){
passwordSpan.style.color="green";
passwordSpan.innerHTML="√";
return true;
}else{
passwordSpan.style.color="red";
passwordSpan.innerHTML="× 密碼錯誤";
return false;
}
}
function checkRepwd(){
var password = document.getElementById("password").value;
var repwd = document.getElementById("repwd").value;
var passwordSpan =document.getElementById("repwdspan");
if(password!=repwd){
passwordSpan.style.color="red";
passwordSpan.innerHTML="× 兩次密碼不一致";
return false;
}else{
passwordSpan.style.color="green";
passwordSpan.innerHTML="√";
return true;
}
}
function checkAge(){
var ageReg=/^[1-9]{1}[0-9]{1,2}$/;
var age = document.getElementById("age").value;
var ageSpan =document.getElementById("agespan");
if(age!=''){
if(ageReg.test(age)){
ageSpan.style.color="green";
ageSpan.innerHTML="√";
return true;
}else{
ageSpan.style.color="red";
ageSpan.innerHTML="× 年齡不合法";
return false;
}
}else{
return ture;
}
}
function checkEmail(){
var emailReg = /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/;
var email = document.getElementById("email").value;
var emailSpan =document.getElementById("emailspan");
if(email!=''){
if(emailReg.test(email)){
emailSpan.style.color="green";
emailSpan.innerHTML="√";
return true;
}else{
emailSpan.style.color="red";
emailSpan.innerHTML="× 年齡不合法";
return false;
}
}else{
return true;
}
}
function subForm(){
/*if(checkUsername()&&checkPassword()){
return true;
}else{
return false;
}*/
return checkUsername()&&checkPassword()&&checkRepwd()&&checkAge()&&checkEmail();
}
</script>
</head>
<body>
<form action = "Login.servlet" method="post" οnsubmit="return subForm()">
<table>
<tr>
<td>用戶名:</td>
<td>
<input type="text" id="username" name="username" οnblur="checkUsername()"/><span id="usernamespan"></span>
</td>
</tr>
<tr>
<td>密碼:</td>
<td>
<input type="password" id="password" name="password" οnblur="checkPassword()"/><span id="passwordspan"></span>
</td>
</tr>
<tr>
<td>確認密碼:</td>
<td>
<input type="password" id="repwd" name="repwd" οnblur="checkRepwd()"/><span id="repwdspan"></span>
</td>
</tr>
<tr>
<td>年齡:</td>
<td>
<input type="text" id="age" name="age" οnblur="checkAge()" /><span id="agespan"></span>
</td>
</tr>
<tr>
<td>郵箱:</td>
<td>
<input type="text" id="email" name="email" οnblur="checkEmail()"/><span id="emailspan"></span>
</td>
</tr>
<tr>
<td colspan="2" align="center">
<input type="reset" value="重置" />
<input type="submit" value="提交" />
<!--<input type="submit" value="提交" οnsubmit="return subForm()" />-->
</td>
</tr>
</table>
</form>
</body>
</html>
