jsp.file
<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<!DOCTYPE HTML>
<html>
<head>
<title>歡迎注冊EasyMall</title>
<meta http-equiv="Content-type" content="text/html; charset=UTF-8" />
<link rel="stylesheet" href="${app}/css/regist.css"/>
<script type="text/javascript" src="${app}/js/jquery-1.4.2.js"></script>
<script type="text/javascript">
/* 注冊表單的js校驗 */
var formObj = {
/* 檢查輸入項是否為空 */
"checkNull" : function(name, msg){
var value = $("input[name='"+name+"']").val().trim();
//清空之前的提示消息
formObj.setMsg(name, "");
if(value == ""){
formObj.setMsg(name, msg);
return false;
}
return true;
},
/* 設置錯誤提示消息 */
"setMsg" : function(name, msg){
$("#"+name+"_msg").html(msg);
$("#"+name+"_msg").css("color", "red");
}
,
/* 注冊表單js校驗 */
"checkForm" : function(){
//1.非空校驗
var res1 = formObj.checkNull("username", "用戶名不能為空");
var res2 = formObj.checkNull("password", "密碼不能為空");
var res3 = formObj.checkNull("password2", "確認密碼不能為空");
var res4 = formObj.checkNull("nickname", "昵稱不能為空");
var res5 = formObj.checkNull("email", "郵箱不能為空");
var res6 = formObj.checkNull("valistr", "驗證碼不能為空");
//2.兩次密碼是否一致
var res7 = formObj.checkPassword("password", "兩次密碼不一致");
//3.郵箱格式是否正確
var res8 = formObj.checkEmail("email", "郵箱格式不正確");
return res1&&res2&&res3&&res4&&res5&&res6&&res7&&res8;
},
/* 檢查郵箱格式是否正確 */
"checkEmail" : function(name, msg){
var email = $("input[name='"+name+"']").val().trim();
if(email == ""){
formObj.setMsg("email", "郵箱不能為空");
}
if(email != ""){
var reg = /^\w+@\w+(\.\w+)+$/;
if(!reg.test(email)){
formObj.setMsg(name, msg);
return false;
}
}
return true;
}
,
/* 檢查兩次密碼是否一致 */
"checkPassword" : function(name, msg){
var psw1 = $("input[name='"+name+"']").val().trim();
var psw2 = $("input[name='"+name+"2']").val().trim();
if(psw2 == ""){
formObj.setMsg(name+"2", "確認密碼不能為空");
}
if(psw1 != "" && psw2 != ""){
if(psw1 != psw2){
formObj.setMsg(name+"2", msg);
return false;
}
}
return true;
}
}
/* 利用ajax實現用戶名是否存在的校驗 */
function ajaxCheckeUsername(thisobj){
//非空校驗
if(!formObj.checkNull("username", "用戶名不能為空!")){
return;
}
//獲取用戶名
var username = thisobj.value;
//使用ajax檢查用戶名是否存在
$("#username_msg").load("${app}/servlet/AjaxCheckUsernameServlet", {"username" : username});
}
</script>
</head>
<body>
<form onsubmit="return formObj.checkForm()" action="${app}/servlet/RegistServlet" method="POST">
<h1>歡迎注冊EasyMall</h1>
<table>
<tr>
<td colspan="2" style="color:red;text-align:center">
${ requestScope.msg }
</td>
</tr>
<tr>
<td class="tds">用戶名：</td>
<td>
<input type="text" name="username"
onblur="ajaxCheckeUsername(this)"
onfocus="formObj.setMsg('username', '')"
value="${ param.username }"/>
<span id="username_msg"></span>
</td>
</tr>
<tr>
<td class="tds">密碼：</td>
<td>
<input type="password" name="password"
onblur="formObj.checkNull('password', '密碼不能為空')"
onfocus="formObj.setMsg('password', '')" value="${ param.password }"/>
<span id="password_msg"></span>
</td>
</tr>
<tr>
<td class="tds">確認密碼：</td>
<td>
<input type="password" name="password2"
onblur="formObj.checkPassword('password', '兩次密碼不一致')"
onfocus="formObj.setMsg('password2', '')" value="${ param.password2 }"/>
<span id="password2_msg"></span>
</td>
</tr>
<tr>
<td class="tds">昵稱：</td>
<td>
<input type="text" name="nickname"
onblur="formObj.checkNull('nickname', '昵稱不能為空')"
onfocus="formObj.setMsg('nickname', '')" value="${ param.nickname }"/>
<span id="nickname_msg"></span>
</td>
</tr>
<tr>
<td class="tds">郵箱：</td>
<td>
<input type="text" name="email"
onblur="formObj.checkEmail('email', '郵箱格式不正確')"
onfocus="formObj.setMsg('email', '')" value="${ param.email }"/>
<span id="email_msg"></span>
</td>
</tr>
<tr>
<td class="tds">驗證碼：</td>
<td>
<input type="text" name="valistr"
onblur="formObj.checkNull('valistr', '驗證碼不能為空')"
onfocus="formObj.setMsg('valistr', '')" value="${ param.valistr }"/>
<img onclick="changeImage(this)" src="${app}/servlet/ValiImageServlet" />
<span id="valistr_msg"></span>
</td>
<script>
function changeImage(thisobj){
thisobj.src = "${app}/servlet/ValiImageServlet?time="+new Date().getTime();
}
</script>
</tr>
<tr>
<td class="sub_td" colspan="2" class="tds">
<input type="submit" value="注冊用戶"/>
</td>
</tr>
</table>
</form>
</body>
</html>
