register.jsp界面代碼如下:
注意以下幾點:1,文本框的name,id最好一致,規範性的命名才符合實際應用,
2,後面校驗的顯示信息此處我定義的爲原來id+“js”,當然這裏可以隨意,不過,關於驗證所有的文本框是否爲空這方法中我把封裝一工具方法,當然可以每個都判斷,不過太麻煩,我見鳳凰網的註冊頁面就是這樣一個一個的寫,太麻煩了。
代碼如下:
<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%@ taglib prefix="s" uri="/struts-tags"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme() + "://"
+ request.getServerName() + ":" + request.getServerPort()
+ path + "/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<base href="<%=basePath%>">
<head>
<link href="css/main.css" type="text/css" media="screen" rel="stylesheet" />
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/register.js"></script>
<title>我的博客系統註冊</title>
</head>
<body>
<div class="registerBody">
<div style="height:500px;" class="registerBox" >
<div class="tit" style="padding:10px 10px 0 0; height:35px; background-position:left bottom;">
<span style="float:right">
已經註冊?請直接
<a href="">
<strong class="u_blue">
<u>登錄</u>
</strong>
</a>
</span>
<h3 class="u_blue">註冊用戶</h3>
</div>
<hr/>
<s:form name="reg" action="register" validate="true">
<table align="center">
<tr>
<td>
<label>
帳號:
</label>
</td>
<td>
<input type="text" id="username" name="username" />
*
</td>
<td>
<div id="usernameJS"></div>
</td><td id="usernameMessage"></td>
</tr>
<tr>
<td>
<label>
密碼:
</label>
</td>
<td>
<input type="password" id="password" name="password" />
*
</td>
<td>
<div id="passwordJS"></div>
</td>
</tr>
<tr>
<td>
<label>
確認密碼:
</label>
</td>
<td>
<input type="password" id="repassword" name="repassword" />
*
</td>
<td>
<div id="repasswordJS"></div>
</td>
</tr>
<tr>
<td>
<label>
郵箱 :
</label>
</td>
<td>
<input type="text" id="email" name="email" />
*
</td>
<td>
<div id="emailJS"></div>
</td>
</tr>
<tr>
<td>
<label>
暱稱:
</label>
</td>
<td>
<input type="text" id="nickname" name="nickname" />
*
</td>
<td>
<div id="nicknameJS"></div>
</td>
</tr>
<tr>
<td>
<label>
密碼保護問題:
</label>
</td>
<td>
<input type="text" id="question" name="question" />
*
</td>
<td>
<div id="questionJS"></div>
</td>
</tr>
<tr>
<td>
<label>
密碼保護的答案:
</label>
</td>
<td>
<input type="text" id="answer" name="answer" />
*
</td>
<td>
<div id="answerJS"></div>
</td>
</tr>
<tr>
<td>
<input type="submit" id="submit" value="註冊" οnclick="return doSubmit()"/>
</td>
</tr>
</table>
</s:form>
</div>
<hr/>
<div class="copyright" align="center">
博客網站 版權所有
<br>
Copyright © 2008-2012 Henu University. All Rights Reserved.
</div></div>
</body>
</html>
頁面如下:
當然界面可以加些圖片,因爲我美感不好,弄個醜八怪,基本雛形就這樣。
下面是js代碼:
$().ready(function() {
isNullValidate("#username", "用戶名不能爲空","請輸入常用的用戶名,該用戶名將作爲登錄"),
isNullValidate("#password", "密碼不能爲空","請設置您的密碼"),
isNullValidate("#repassword", "確認密碼不能爲空","請輸入常用密碼"),
isNullValidate("#nickname","暱稱不能爲空","請設置您的暱稱"),
isNullValidate("#question", "密保問題不能爲空","請設置您的密保"),
isNullValidate("#answer", "答案不能爲空","請設置您的密保問題"),
isNullValidate("#email","郵箱不能爲空","請設置您的郵箱")
validateEmail(),
validateUsername(),
validateLength("#username",3,20,"用戶名長度必須爲3-20位"),
validateLength("#password",3,30,"用戶名長度必須爲3-30位"),
validateEqual("#password","#repassword","密碼不一致")
})
//isNull校驗是否爲空
function isNullValidate(id, message,messageTip) {
//失去焦點 進行校驗
$(id).blur(function(){
isNull(id,message);
});
//得到焦點顯示的提示信息
$(id).focus(function(){
showTip(id,messageTip);
});
}
function showTip(id,messageTip){
var idJS= id + "JS";
$(idJS).css({"color":"black"});
showMessage(idJS,messageTip);
}
function isNull(id,message){
var value = $(id).val();
var idJS = id + "JS";
if (value == null || value == "") {
$(idJS).css({"color":"red"});
$(id).css({"background":"gray","border-color":"red","border":""});
showMessage(idJS, message);
return false;
} else {
$(id).css({"background":"white"});
showMessage(idJS, "");
showPic(idJS);
return true;
}
}
//validateLength校驗長度
function validateLength(id, min, max, message) {
$(id).blur(function() {
validate_length(id,min,max,message);
})
}
function validate_length(id,min,max,message){
var idJS = id + "JS";
var value = $(id).val();
if (value.length < min || value.length > max){
showMessage(idJS, message);
$(idJS).css({"color":"red"});
return false;
}
else{
showMessage(idJS, "");
showPic(idJS);
return true;
}
}
//validateEqual校驗是否相等
function validateEqual(id1, id2, message) {
//此處無法$(id1,id2),否則將出現奇怪的錯誤,而其他網站也同樣有這樣的bug
//比如前兩次分別輸入密碼(password,repassword)相同,當改變第一個密碼加其他的後不提示密碼不一致
$(id2).blur(function() {
validate_equal(id1,id2,message);
})
}
function validate_equal(id1,id2,message){
var idJS2 = id2 + "JS";
var value1 = $(id1).val();
var value2 = $(id2).val();
if (value1 != value2) {
showMessage(idJS2, message);
$(idJS2).css({"color":"red"});
$(id2).css({"background":"gray","border-color":"red","border":""});
$(id1).css({"background":"gray","border-color":"red","border":""});
return false;
} else {
$(id1).css({"background":"white"});
$(id2).css({"background":"white"});
showMessage(idJS2, "");
showPic(idJS2);
return true;
}
}
//validateEmali校驗email格式
function validateEmail() {
$("#email").blur(function(){
isEmail();
} )
}
function isEmail(){
var email = $("#email").val();
var reg = /^\w+((-\w+)|(\.\w+))*\@[A-Za-z0-9]+((\.|-)[A-Za-z0-9]+)*\.[A-Za-z0-9]+$/;
if (reg.test(email)) {
// showMessage("#emailJS", "");
// showPic("#emailJS");
return true;
} else {
showMessage("#emailJS", "Email格式不正確");
$("#emailJS").css({"color":"red"});
$("#email").css({"background":"gray","border-color":"red","border":""});
return false;
}
}
function validateName(){
$.ajax( {
type : "POST",
url : "executeUsername",
data : "username=" + $("#username").val(),
success : getValidateName,
dataType : "text"
});
}
function getValidateName(message) {
if(message == "false"){
showMessage("#usernameJS","用戶名已註冊,請更換註冊名");
$("#username").css({"background":"gray","border-color":"red","border":""});
$("#usernameJS").css({"color":"red"});
return false;
}
else{
showMessage("#usernameJS","恭喜你,此用戶名可用");
$("#username").css({"background":"white"});
$("#usernameJS").css({"color":"green"});
return true;
}
}
//valivateUsername校驗用戶名是否被註冊
function validateUsername() {
$("#username").blur(function(){
var value=$("#username").val();
if(value!=null&&value!=""){
validateName();
}else return false;
} )
}
//showMessage工具方法,顯示某id需要顯示的信息
function showMessage(id, message) {
$(id).html(message);
}
function showPic(id) {
$(id).append("<img src='images/register_ok.png'></img>");
}
function doSubmit(){
if(isNull("#username", "用戶名不能爲空","#usernameJS")
&& isNull("#password", "密碼不能爲空","#passwordJS")
&& isNull("#repassword", "確認密碼不能爲空","#repasswordJS")&& isNull("#nickname","暱稱不能爲空","#nicknameJS")
&& isNull("#question", "密保問題不能爲空","#questionJS")&& isNull("#answer", "答案不能爲空","#answerJS")
&& isNull("#email","郵箱不能爲空","#emailJS")
&& isEmail()
// && validateName()
&& validate_length("#username",3,20,"用戶名長度必須爲3-20位")
&& validate_length("#password",3,30,"用戶名長度必須爲3-30位")
&& validate_equal("#password","#repassword","密碼不一致")){
return true;
}
else {
alert("請重新輸入");
return false;
}
}
相信大家也看到了,
$().ready(function() 定義頁面加載的腳本,這裏我們綁定文本框的focus和blur事件,即,聚焦和失去焦點,當聚焦時在div裏顯示出要輸入的信息,而失去焦點時進行校驗,這裏有個關鍵的,利用ajax往action裏查詢是否有輸入的用戶名,並返回true或false字符串,
所以
function validateName(){
$.ajax( {
type : "POST",
url : "executeUsername",
data : "username=" + $("#username").val(),
success : getValidateName,
dataType : "text"
});
}傳參數,返回函數處理如下:
function getValidateName(message) {
if(message == "false"){
showMessage("#usernameJS","用戶名已註冊,請更換註冊名");
$("#username").css({"background":"gray","border-color":"red","border":""});
$("#usernameJS").css({"color":"red"});
return false;
}
else{
showMessage("#usernameJS","恭喜你,此用戶名可用");
$("#username").css({"background":"white"});
$("#usernameJS").css({"color":"green"});
return true;
}
}
action中處理:
public String executeUsername(){
HttpServletResponse response = ServletActionContext.getResponse();
response.setCharacterEncoding("UTF-8");
PrintWriter writer = null;
try {
writer = response.getWriter();
} catch (IOException e) {
// TODO Auto-generated catch block
e.printStackTrace();
}
if(userService.regusterUsername(username)){
writer.print("false");
}else{
writer.print("true");
}
return null;
}
此時基本完成,下面是效果圖: