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

標籤：on()   決定   執行   false   span   圖片   name   不一致   cache   

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_-])[email protected]([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校正功能之頁面實現