register.html的程式碼範例
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/limonte-sweetalert2/6.6.5/sweetalert2.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/limonte-sweetalert2/6.6.5/sweetalert2.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<title>註冊頁面</title>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-4 col-md-offset-4">
<h1 style="text-align:center">註冊頁面</h1>
<hr>
<form>
<div id="tips"></div>
<label for="username">帳號</label>
<input type="text" class="form-control" name="username" placeholder="請輸入帳號" title="請輸入4~20位的英數字或_" pattern="^\w{4,20}$" />
<br>
<label for="password">密碼</label>
<input type="password" class="form-control" name="password" placeholder="請輸入密碼" title="請輸入6~20位的英數字或_" pattern="^\w{6,20}$"
/>
<br>
<label for="confirm">確認密碼</label>
<input type="password" class="form-control" name="confirm" placeholder="再次輸入密碼" title="請輸入6~20位的英數字或_" pattern="^\w{6,20}$"
/>
<br>
<input type="submit" class="btn btn-primary btn-lg btn-block" value="註冊"></input>
<br>
</form>
<hr> 已經有帳號嗎了? <a href="/login">登入</a>
</div>
</div>
</div>
<script>
$(function () {
$("form").submit(function (e) {
e.preventDefault();
var username = $("form input[name=username]").val(),
password = $("form input[name=password]").val(),
confirm = $("form input[name=confirm]").val();
if (password != confirm) {
$("#tips").html(`<div class="alert alert-danger alert-dismissable">
<a href="#" class="close" data-dismiss="alert" aria-label="close">×</a>
<strong>註冊失敗: </strong> 兩次密碼輸入不同
</div>`);
$("form input[name=password]").focus();
return;
}
$.ajax({
type: "post",
url: "/register",
data: {
username: username,
password: password
},
dataType: "json",
success: function (response) {
switch (response.code) {
case 200:
swal({
title: '註冊成功',
text: '5秒內會自動導向登入畫面',
timer: 5000,
type: 'success',
}).then(
function () {
location.href = "/login";
},
function (dismiss) {
if (dismiss === 'timer') {
location.href = "/login";
}
}
)
break;
case 409:
$("#tips").html(`<div class="alert alert-danger alert-dismissable">
<a href="#" class="close" data-dismiss="alert" aria-label="close">×</a>
<strong>註冊失敗: </strong> 已經有人使用此帳號
</div>`);
break;
}
}
});
});
});
</script>
</body>
</html>