談談開心王國的用戶注冊頁面

話說：熟能生巧。同一件事情，做一次，和做十次，的確是有很大不同，就拿這兩天做的這個注冊頁面來說吧，明顯比之前的要好用很多。

比如說之前，填寫了用戶名之后，不能馬上與服務器交互，檢測用戶名是否被占用，現在通過事件onblur調用函數CheckUser()，從而可以馬上檢測出用戶名是否被占用。

比如說之前，用戶每一個信息輸入完，不能馬上給出是否輸入正確的提示，現在也通過這個方法，可以給與提示。

比如說之前，如果驗證碼輸入的不正確，那么頁面提交之后，之前輸入的密碼等信息會丟失，需要用戶重新填寫，現在不用了，驗證碼輸入不正確，那重新填寫驗證碼就是了，干嘛要重新填寫密碼呢，你說是吧。（博客園，我沒說你呀，別對號入座，嘿嘿）

當然，要實現這么的易用，可是累死了不少腦細胞，為了不讓更多人重蹈覆轍，這里將示例網址及關鍵代碼貼出來，供大家參考，點評。

頁面肯定是要引入jquery.validate，這里毋庸置疑，引用這個插件后，用戶在提交時，以及在輸入時，會初步檢測輸入的合法性，這個插件想必大家已經很熟了，就不再多說了。

再者就是使用onblur事件，每一行信息填寫完成后，就觸發該事件，並針對相關信息給出提示，比如用戶名是否占用，密碼強度是否足夠等等，這些jquery.validate無法完成的事情，還有一點，就是該行信息檢測通過后要給出正確提示，鼓勵用戶進一步操作，這點jquery.validate插件也是無法實現，我們可以通過這個事件，給頁面控件賦值，示例代碼如下。

    function CheckUser() {
        var username = $('#UserName').attr("value");
        $.ajax({
            type: "POST",
            contentType: "application/json",
            url: "/User/CheckUserIsExist?u=" + username + "&r=" + Math.random(),
            data: "{}",
            dataType: 'json',
            success: function (result) {
                if (result != null) {
                    if (result.Userid > 0) {
                        $('#UserNameMsg').html("<img src='/Content/Images/error.png' alt='' />用戶名重復");
                    }
                    else {
                        if (username.length > 0) {
                            $('#UserNameMsg').html("<img src='/Content/Images/ok.png' alt='' />用戶名可以注冊");
                        }
                    }
                }
            },
            error: function (XMLHttpRequest, textStatus, errorThrown) {
                $('#UserNameMsg').html("<img src='/Content/Images/error.png' alt='' />檢測重名異常，請重試");
            }
        });
    }

而最關鍵的，校驗驗證碼則是一個難題，如果采用普通的頁面提交到后台，那因為Password控件的特殊性，從后台返回之前輸入的值到頁面上時，密碼控件的值必定清零，具體請見博客園注冊頁面。並且在返回的過程中，還有其他一些問題，比如之前的驗證提示丟失，頁面刷新等等問題。

我這里是這么解決的。

在頁面提交事件中，通過Ajax獲取當然驗證碼的值，與輸入框的值比如，如果正確，進行下一步，如果錯誤，給與提示，截斷頁面繼續提交。

而讓頁面默認不提交，先檢測驗證碼是否是正確。

關鍵代碼1：onsubmit = "return false;" 

關鍵代碼2：

    function formSubmit() {
        var validateCode = $('#ValidateCode').attr("value");
        if (validateCode == "") {
            return;
        }
        $.ajax({
            type: "POST",
            url: "/User/GetValidateCode?r=" + Math.random(),
            data: {
                code: validateCode
            }, //要發送的數據
            dataType: 'text',
            success: function (result) {
                debugger;
                if (validateCode != result) {
                    alert("輸入驗證碼不正確，請重新輸入！");
                    $('#ValidateCode').attr("value", "");
                }
                else {
                    var userName = $('#UserName').attr("value");
                    var passWord = $('#PassWord').attr("value");
                    var safeMail = $('#SafeMail').attr("value");
                    $.post("/User/Register", { userName: userName, passWord: passWord, safeMail: safeMail }, function (txt) {
                        if (txt != "OK") {
                            alert("注冊成功！");
                            window.location.href = "/";
                        }
                    }, "text");
                }
            },
            error: function (XMLHttpRequest, textStatus, errorThrown) {
                alert("注冊異常，請稍后再試！");
            }
        });       
    }

至此，一個個人認為小有成就的注冊頁面，就此完成，當然些頁面也不算完美，若是有人有更好的解決辦法，還請不吝賜教，多多指導。

最后給與示例網址：http://www.kxwg.net/User/Register

 

這個網站是個人新開發的，目的是共享每個人手中的歡樂圖片及精彩語句，也請各位多多參與，獨樂樂，不是眾樂樂，您說是吧。

這個網站叫《開心王國》哦，如果覺得還不錯，請分享給您的家人和朋友，在此謝過了。