頁面的構建簡單地應用了bootstrap，通過js代碼實現了註冊表單的驗證功能。代碼如下：
<!DOCTYPE html>
<html>
<head>
<title>用戶註冊</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<!-- 用於適應不同設備 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- bootstrap 樣式表 -->
<link rel="stylesheet" href="http://apps.bdimg.com/libs/bootstrap/3.2.0/css/bootstrap.min.css">
<script src="http://apps.bdimg.com/libs/jquery/2.0.0/jquery.min.js"></script>
<script src="http://apps.bdimg.com/libs/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<!-- HTML5 Shim 和 Respond.js 用於讓 IE8 支持 HTML5元素和媒體查詢 -->
<!-- 注意： 如果通過 file:// 引入 Respond.js 文件，則該文件無法起效果 -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
<![endif]-->
<script type="text/javascript">
var flag = {
"email":false,
"username":false,
"nickname":false,
"password":false,
};
$(function(){
// email驗證
$("#txtEmail").blur(function(){
var email = $(this).val();
var pattern=/\b(^['_A-Za-z0-9-]+(\.['_A-Za-z0-9-]+)*@([A-Za-z0-9-])+(\.[A-Za-z0-9-]+)*((\.[A-Za-z0-9]{2,})|(\.[A-Za-z0-9]{2,}\.[A-Za-z0-9]{2,}))$)\b/;
if(!pattern.test(email)){
$("#email\\.info").html("Email格式不正確");
return;
}else{
$("#email\\.info").html("");
flag.email = true;
}
// 郵箱重複校驗
});
$("#txtUserName").blur(function(){
// 用戶名校驗
var username = $(this).val();
// 校驗規則，可調整
var pattern = /\b(^['A-Za-z0-9]{4,20}$)\b/;
if(!pattern.test(username)){
$("#username\\.info").html("用戶名不合法");
return;
}else{
$("#username\\.info").html("");
flag.username = true;
}
});
$("#txtNickName").blur(function(){
// 暱稱校驗
var nickname = $(this).val();
// 校驗規則，可調整
var pattern = /\b(^['A-Za-z0-9]{4,20}$)\b/;
if(!pattern.test(nickname)){
$("#nickname\\.info").html("暱稱不合法");
return;
}else{
$("#nickname\\.info").html("");
flag.nickname = true;
return;
}
});
// 密碼校驗
$("#txtPassword").blur(function(){
var password=$(this).val();
var pattern = /\b(^['A-Za-z0-9]{4,20}$)\b/;
if (!pattern.test(password)) {
$("#password\\.info").html("密碼格式不正確");
return;
}else{
$("#password\\.info").html("");
//flag.password=true;
return;
}
});
// 密碼重複校驗
$("#txtRepeatPass").blur(function(){
var repeatPass = $(this).val();
var pattern = /\b(^['A-Za-z0-9]{4,20}$)\b/;
if (repeatPass!=$("#txtPassword").val()) {
$("#repeatPass\\.info").html("兩次密碼輸入不一致");
return;
}else{
$("#repeatPass\\.info").html("");
flag.password = true;
return;
}
});
$("#form").submit(function(){
var ok = flag.email&&flag.password&&flag.nickname;
if(ok==false){
alert("表單項正在檢測或存在錯誤");
history.back();
return false;
}
return true;
});
})
</script>
</head>
<body style="padding-top:50px;">
<form class="form-horizontal" role="form" method="post" id="form">
<div class="form-group">
<label for="uname" class="col-sm-2 control-label">用戶名</label>
<div class="col-sm-6">
<input type="text" class="form-control" id="txtUserName" name="username"
placeholder="請輸入用戶名" required>
<span id="username.info" style="color:red"></span>
</div>
</div>
<div class="form-group">
<label for="lastname" class="col-sm-2 control-label">註冊郵箱</label>
<div class="col-sm-6">
<input name="email" type="text" class="form-control" id="txtEmail"
placeholder="請輸入註冊郵箱" required>
<span id="email.info" style="color:red"></span>
</div>
</div>
<div class="form-group">
<label for="nickname" class="col-sm-2 control-label">暱稱</label>
<div class="col-sm-6">
<input type="text" class="form-control" name="nickname" id="txtNickName"
placeholder="請輸入暱稱" required>
<span id="nickname.info" style="color:red"></span>
</div>
</div>
<div class="form-group">
<label for="passwd" class="col-sm-2 control-label">密碼</label>
<div class="col-sm-6">
<input type="password" class="form-control" name="password" id="txtPassword"
placeholder="請輸入密碼" required>
<span id="password.info" style="color:red"></span>
</div>
</div>
<div class="form-group">
<label for="repeatPass" class="col-sm-2 control-label">重複密碼</label>
<div class="col-sm-6">
<input type="password" class="form-control" name="repeatPass" id="txtRepeatPass"
placeholder="請再次輸入密碼" required>
<span id="repeatPass.info" style="color:red"></span>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button type="submit" class="btn btn-primary">註冊</button>
</div>
</div>
</form>
</body>
</html>