直接上代碼
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="/statics/ionicons/css/w3.css">
<link rel="stylesheet" href="/statics/ionicons/css/ionicons.min.css">
<title>Register Famcost account!</title>
<style>
#register {
margin: 0 auto;
margin-top: 250px;
}
</style>
</head>
<body>
<div class="w3-row-padding w3-margin-top">
<div id="register" class="w3-card-4" style="max-width: 600px">
<div class="">
<div class="w3-container w3-teal">
<h2>Register</h2>
</div>
<form action="/register" method="post" class="w3-container" id="register-form">
<table>
<tr>
<td><label class="w3-label">域賬戶</label></td>
<td><input type="text" class="w3-input" placeholder="Please input your domain ID" name="userid" id="userid" required></td>
</tr>
<tr>
<td><label class="w3-label">姓名</label></td>
<td><input type="text" class="w3-input" placeholder="Please input your Chinese Name" name="username" required></td>
</tr>
<td><label class="w3-label">密碼</label></td>
<td> <input type="password" class="w3-input" placeholder="Passwd must has at least 6 characters " name="password" required></td>
<tr>
<td><label class="w3-label">確認密碼</label></td>
<td><input type="password" class="w3-input" placeholder="Input passwd again" name="passwordAgain" required></td>
</tr>
</table>
<div class="w3-right w3-margin-top w3-margin-bottom">
<button class="w3-btn w3-teal" type="submit">Register</button>
<a href="/login">Login</a>
</div>
</form>
</div>
</div>
</div>
</body>
<script>
var registerForm = document.getElementById('register-form');
registerForm.onsubmit = function() {
if (this.elements["password"].value != this.elements['passwordAgain'].value) {
alert("Password not match");
return false;
}else if (this.elements['userid'].value.length != 6 || this.elements['password'].value.length < 6) {
alert('Username and password must has at least 6 characters');
return false;
}else if (this.elements['userid'].value == this.elements['password'].value) {
alert('Username must different password');
return false;
} else {
return true;
}
}
</script>
</html>
