1 、現在我們要在regist.js中實現ajax的功能,使用用戶名到後臺查詢是否註冊，郵箱是否到後臺註冊，驗證碼是否正確的功能

我們來看regist.js的代碼

//該函數在html文檔加載完成之後會調用
$(function() {
    /*
     * 變量所有的錯誤信息，調用一個方法來決定是否顯示錯誤信息
     * */
    $(".errorClass").each(function() {
        showError($(this));//$(this)表示當前遍歷的對象
    });
    
    
    //切換註冊按鈕的圖片
    $("#submitBtn").hover(function () 
 
{
        //獲得光標焦點
        $("#submitBtn").attr("src","/goods/images/regist2.jpg");
    },function(){
        //失去光標的焦點
        $("#submitBtn").attr("src","/goods/images/regist1.jpg");
        
        
    });
    
    //當輸入框獲得焦點的時候，隱藏label標簽的內容
    $(".inputClass").focus(function() {
        //首先獲得label標簽的id
        var inputId = $(this).attr("id");
        var labelId = inputId+"Error";//label的id
        //清楚該標簽的內容
        $("#"+labelId).text("");
        //讓該標簽不顯示
        showError($("#"+labelId));
    
 
});
    //當輸入框失去焦點的時候，我們需要對輸入的數據進行有效的校驗，比如輸入的電話號碼是否合法，郵箱是否合法
    $(".inputClass").blur(function() {
        //首先判斷當前是那個input輸入框被調用了
        var inputId = $(this).attr("id");
        //;
        //調用對應的校驗方法
        var functionName = "validate"+inputId;//獲得需要調用的驗證函數，如果是id為loginname，就調用validateloginname()函數進行驗證
        switch(functionName){
        case "validateloginname"
 
:
            validateloginname();
            break;
        case "validateloginpass":
            validateloginpass();
            break;    
        case "validatereloginrepass":
            validatereloginrepass();
            break;    
        case "validateemail":
            validateemail();
            break;    
        case "validateverifyCode":
            validateverifyCode();
            break;
        default:
            break;
        }
    });
    
    //對表單的提交進行校驗
    $("#registForm").submit(function() {
        if(! validateloginname()){
            return false;
        }
        if(! validateloginpass()){
            return false;
        }
        if(! validatereloginrepass()){
            return false;
        }
        if(! validateemail()){
            return false;
        }
        if(! validateverifyCode()){
            return false;
        }
        
        return true;
    });
    
    
});

//  對輸入的用戶名進行合法性校驗
function validateloginname(){
    //獲得輸入框中的內容
    var content = $("#loginname").val();
    // 非空校驗
    if(!content){
        //內容為空，將後面的label顯示出來
        $("#loginnameError").text("用戶名不能為空！");
        //顯示標簽
        showError($("#loginnameError"));
        return false ;//不再執行後面的語句
    }
    //長度校驗
    if(content.length <2 || content.length>20){
        //內容為空，將後面的label顯示出來
        $("#loginnameError").text("用戶名的長度必須在2-20之間！");
        //顯示標簽
        showError($("#loginnameError"));
        return false ;//不再執行後面的語句
    }
    //是否已經註冊的校驗
    //使用ajax到後臺服務器去驗證
    $.ajax({
        // 等於http:///goods/UserServlet?method=validateLoginname&loginname=content
        url:"/goods/UserServlet",
        data:{method:"validateLoginname",loginname:content},//其中method指的是要訪問UserServlet中的那個方法;
        type:"POST",
        dataType:"json",
        async:false, //這裏選擇同步，如果選擇異步操作還沒有到服務器查詢完結果，就直接返回結果了true了
        cache:false,
        success:function(result){
            if(result){
                //內容為空，將後面的label顯示出來
                $("#loginnameError").text("用戶名已經註冊");
                //顯示標簽
                showError($("#loginnameError"));
                return false ;//不再執行後面的語句
            }
        }
        
    });
    
    
    return true;
}

//對輸入的密碼進行校驗
function validateloginpass(){
    //獲得輸入框中的內容
    var content = $("#loginpass").val();
    // 非空校驗
    if(!content){
        //內容為空，將後面的label顯示出來
        $("#loginpassError").text("密碼不能為空！");
        //顯示標簽
        showError($("#loginpassError"));
        return false ;//不再執行後面的語句
    }
    //長度校驗
    if(content.length <3 || content.length>20){
        //內容為空，將後面的label顯示出來
        $("#loginpassError").text("密碼的長度必須在3-20之間！");
        //顯示標簽
        showError($("#loginpassError"));
        return false ;//不再執行後面的語句
    }
    return true;
}

//對輸入的確認密碼進行校驗
function validatereloginrepass(){
    //獲得輸入框中的內容
    var content = $("#reloginrepass").val();
    // 非空校驗
    if(!content){
        //內容為空，將後面的label顯示出來
        $("#reloginrepassError").text("密碼不能為空！");
        //顯示標簽
        showError($("#reloginrepassError"));
        return false ;//不再執行後面的語句
    }
    //判斷兩次輸入的內容是否一致
    if(content !=  $("#loginpass").val()){
        //內容為空，將後面的label顯示出來
        $("#reloginrepassError").text("兩次輸入的密碼不一致!");
        //顯示標簽
        showError($("#reloginrepassError"));
        return false ;//不再執行後面的語句
    }
    return true;
    
}

// 對輸入的郵箱地址進行校驗
function validateemail(){
    //獲得輸入框中的內容
    var content = $("#email").val();
    // 非空校驗
    if(!content){
        //內容為空，將後面的label顯示出來
        $("#emailError").text("郵箱不能為空！");
        //顯示標簽
        showError($("#emailError"));
        return false ;//不再執行後面的語句
    }
    //判斷輸入的郵箱格式是否正確
    if(!/^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+((\.[a-zA-Z0-9_-]{2,3}){1,2})$/.test(content)){
        //內容為空，將後面的label顯示出來
        $("#emailError").text("郵箱格式不正確!");
        //顯示標簽
        showError($("#emailError"));
        return false ;//不再執行後面的語句
    }
    
    //到後臺服務器檢查是否郵箱已經註冊了
    //使用ajax到後臺服務器去驗證
    $.ajax({
        url:"/goods/UserServlet",
        data:{method:"validateEmail",email:content},//其中method指的是要訪問UserServlet中的那個方法;
        type:"POST",
        dataType:"json",
        async:false, //這裏選擇同步，如果選擇異步操作還沒有到服務器查詢完結果，就直接返回結果了true了
        cache:false,
        success:function(result){
            if(result){
                //內容為空，將後面的label顯示出來
                $("#emailError").text("該郵箱已經被註冊");
                //顯示標簽
                showError($("#emailError"));
                return false ;//不再執行後面的語句
            }
        }
        
    });
    
    return true;
}

//對輸入的地址進行校驗
function validateverifyCode(){
    //獲得輸入框中的內容
    var content = $("#verifyCode").val();
    // 非空校驗
    if(!content){
        //內容為空，將後面的label顯示出來
        $("#verifyCodeError").text("驗證碼不能為空！");
        //顯示標簽
        showError($("#verifyCodeError"));
        return false ;//不再執行後面的語句
    }
    //驗證碼的長度必須是4
    if(content.length != 4){
        //內容為空，將後面的label顯示出來
        $("#verifyCodeError").text("驗證碼不正確!");
        //顯示標簽
        showError($("#verifyCodeError"));
        return false ;//不再執行後面的語句
    }
    
    // 到後臺驗證驗證碼是否正確
    //使用ajax到後臺服務器去驗證
    $.ajax({
        url:"/goods/UserServlet",
        data:{method:"validateVerifyCode",verifyCode:content},//其中method指的是要訪問UserServlet中的那個方法;
        type:"POST",
        dataType:"json",
        async:false, //這裏選擇同步，如果選擇異步操作還沒有到服務器查詢完結果，就直接返回結果了true了
        cache:false,
        success:function(result){
            if(!result){
                //內容為空，將後面的label顯示出來
                $("#verifyCodeError").text("驗證碼不正確!");
                //顯示標簽
                showError($("#verifyCodeError"));
                return false ;//不再執行後面的語句
            }
        }
        
    });
    return true;
}


//判斷當前元素是否存在內容，存在顯示，不存在不顯示
function showError( ele ){
    var text = ele.text();//獲得該對象的文本值
    if(!text){
        ele.css("display","none");//讓該對象消息
    }else{
        ele.css("display","");//顯示對象
    }

}

//實現驗證碼圖片的切換功能
function changeVerifyCode() {
    $("#imgVerifyCode").attr("src","/goods/VerifyCodeServlet?a="+new Date().getTime());
}

JavaWeb網上圖書商城完整項目--day02-6.ajax校驗功能之頁面實現