網上搜了些實時監測用戶名的腳本例子,沒效果,結合其他資料寫了下面這個,實現在用戶名輸入框失去焦點時,檢測用戶名是否可用,並修改當前頁面的樣式。
<form action="../CheckUserNameExistServerlet " method="post" name="signup_form">
............
<input class="input_1" id="user_name" maxlength="30" name="user[name]" size="30" type="text" title="" onblur="validate_User_name();" />
............
//user_name輸入框失去焦點後,執行腳本
function validate_User_name() {
var user_already_exist = 0;
var user_name = document.getElementById("user_name");
/*同步驗證數據庫中是否已經存在該用戶名*/
user_already_exist = check_User_Name_Exist();
if(user_already_exist == 1){
//如果用戶名已經存在,提示用戶用戶名不可用,樣式validation-failed讓輸入框變色
user_name.setAttribute("title","用戶名已被佔用");
user_name.setAttribute("class","input_1 validation-failed");
}else{
user_name.setAttribute("title","");
user_name.setAttribute("class","input_1");
}
return;
}
/* 連接後臺檢查用戶名是否可用 */
function check_User_Name_Exist(){
var user_Name_Used_Check = 0;
var ajax = GetXMLHttpRequestObj();
//將用戶名發送給servlet或jsp處理,這裏發送給servlet
var urlString = "../CheckUserNameExistServerlet ?user[name]="+document.getElementById('user_name').value;
//var urlString = "./checkUserNameExistServerlet.jsp?user[name]="+document.getElementById('user_name').value;
//等待用戶名檢查完成
ajax.open("get", urlString, false);
ajax.send(null);
ajax.onreadystatechange = (function(){
if (ajax.readyState == 4 && ajax.status == 200){
//ajax.responseText是服務器的返回值,0:用戶名可用;1:用戶名已被佔用,
//只需要在檢查的頁面或servlet試用out.print(XXX)即可將結果寫入ajax.responseText。
//responseText中有很多空格,需要處理掉才能正確判斷返回的結果
if(ajax.responseText.trim() == "0"){
user_Name_Used_Check = 0;
} else {
user_Name_Used_Check = 1;
}
}
})();
return user_Name_Used_Check;
}
/*創建XMLHttpRequest對象*/
function GetXMLHttpRequestObj()
{
var ajax=false;
try{
ajax = new ActiveXObject("Msxml2.XMLHTTP");
}
catch (e){
try{
ajax = new ActiveXObject("Microsoft.XMLHTTP");
}catch (E){
ajax = false;
}
}
if (!ajax && typeof XMLHttpRequest!='undefined') {
ajax = new XMLHttpRequest();
}
return ajax;
}
//servlet部分代碼
public class CheckUserNameExistServerlet extends HttpServlet {
}response.setContentType("text/html");
response.setCharacterEncoding("gb2312");
PrintWriter out = response.getWriter();
//顯示用戶的全部信息
//得到要顯示的用戶名
String user_name = request.getParameter("user[name]");
Integer uer_Name_chechk_Exist_result = 0;
UserBeanBO ubo=new UserBeanBO();
//getUserBeanByUsername登陸數據庫查找是否有名爲user_name 的用戶存在,不存在則返回null。
UserBean ub=ubo.getUserBeanByUsername(user_name);
if(null == ub){
uer_Name_chechk_Exist_result = 0;
System.out.println("用戶名可用");
}else{
uer_Name_chechk_Exist_result = 1;
System.out.println("用戶名不可用");
}
//直接將結果用out.println輸出即可
out.println(uer_Name_chechk_Exist_result);