實時驗證用戶名是否重復

    現(xiàn)在很多網(wǎng)站在注冊用戶名時，你只要輸入好要注冊的用戶名后，不用提交請求就可以實時的顯示用戶名是否可用，重復等。這總情況下不能刷新頁面，而要把用戶名提交到后臺比對，后臺把結(jié)果返回到前端，前端再顯示出用戶名是否可用。下面將使用JQuery的ajax方法，和JQuery的表單功能來實現(xiàn)我們的需求

JQuery ajax方法

此方法可以提交任何地方的數(shù)據(jù)到后臺，實現(xiàn)代碼如下

在這之前需要加載JQuery的js

$(function () {
    var old_data = $("#id_ServerName").val();
    $("#id_ServerName").change(function () {
        var data = $("#id_ServerName").val();
        if (data !== old_data){
            $.ajax({
                url: "/am/check",
                type: "post",
                data: {"host_name": data},
                success: function (arg) {
                    if (arg === "Error"){
                        $("#id_error_info").removeClass("error_info");
                    }else if (arg === "OK") {
                        $("#id_error_info").addClass("error_info");
                    }else{
                        console.log("OK");
                    }
                },
                fail: function () {
                }
            })
        }else {
            $("#id_error_info").addClass("error_info");
        }
    })
});

實現(xiàn)思路：

1. 首先是創(chuàng)建一個自運行函數(shù)

2. 然后定義一個old_data，獲取初始值，根據(jù)業(yè)務不同，這里不一定大家都需要，如果是注冊，判斷用戶名是否存在就不需要，但如果是修改用戶名，就需要，因為修改用戶名的時候，首先需要獲取到當前用戶名

3. 然后再通過JQuery獲取id為id_ServerName的標簽(通常為input標簽)，并監(jiān)聽一個change事件（當value發(fā)生更改時）執(zhí)行一個函數(shù)

4. 獲取新的值（這個值是需要傳入后臺進行比對的數(shù)據(jù)）

5. 判斷新值是否等于老的值，如果等于就不進行任何操作，我這里是添加了一個類，這個類是用于將錯誤信息隱藏。如果不等于，就需要執(zhí)行ajax將數(shù)據(jù)傳入后臺，然后后臺進行比對

6. ajax指定了需要傳入的url（這里分為本域請求和跨域請求，我這里是本域請求，如果是跨域自行百度解決）。指定數(shù)據(jù)傳輸類型為post，也可以指定為get。指定了傳入的數(shù)據(jù)，數(shù)據(jù)為一個字典，key為自定義，value為獲取到的新數(shù)據(jù)，后端接收到就為字典。seccess，定義了一個函數(shù)，這個函數(shù)用來處理請求成功后端返回的數(shù)據(jù)，這個數(shù)據(jù)用了一個參數(shù)去接收，參數(shù)名自定義，我這里為arg。Error,OK為后端處理好數(shù)據(jù)后返回的結(jié)果，前端根據(jù)返回結(jié)果做處理。fail也定義了一個函數(shù)，這個函數(shù)用來處理請求失敗時的處理函數(shù)，比如超時或者其它
   

JQuery 表單驗證

此方法可提交form表單內(nèi)指定的數(shù)據(jù)到后臺，此外表單功能對ajax做了一些封裝，使其使用更簡單，更方便，推薦使用，代碼如下

首先需要加載JQuery表單驗證的模塊

<script src="/static/jquery.js"></script>
<script src="/static/jquery.validate.min.js"></script>
<script src="/static/messages_zh.js"></scrip

下面是JQuery代碼塊

$().ready(function() {
    $("#commentForm").validate({
        rules: {
            EnvName: {
                required: true,
                remote: {
                    url: "/am/check",
                    type: "post"
                }
            }
        },
        messages: {
            EnvName: {
                required: "請輸入環(huán)境名稱",
                remote: "此名稱已經(jīng)被使用"
            }
        }
    });
});

實現(xiàn)思路：

1. 同樣也是創(chuàng)建了一個自執(zhí)行函數(shù)，調(diào)用了ready方法，此方法又調(diào)用了一個函數(shù)，至于為什么是ready方法，自行查找相關資料

2. 找到form表單，這里通過id找到，然后監(jiān)聽一個validata事件

3. rules用來定義規(guī)則，EnvName為標簽的name屬性，通過為input標簽，也就是需要驗證的標簽，如果有多個標簽需要驗證，那么就在對應的花括號后面加個逗號，然后換行寫另外一個規(guī)則

4. required: true表示此標簽為必填

5. remote表示調(diào)用ajax（重點），此方法url表示數(shù)據(jù)要上傳的url，同樣也存在本域請求或者跨域請求，type指定數(shù)據(jù)類型，data，指定要傳輸?shù)臄?shù)據(jù)，默認為本標簽的value，也是以字典形式，其中key為標簽的name，value為標簽的value，另外這里只接收false返回值和true返回值，區(qū)別大小寫，這里為小寫，所以后端處理完數(shù)據(jù)后必須返回指定的字符串，否則無法處理

6. messages指定當規(guī)則里面判斷出錯需要提示的消息，比如這里EnvName標簽里面，如果此標簽沒有寫任何內(nèi)容就會出現(xiàn)后面指定的提示，如果是遠程調(diào)用返回false則出現(xiàn)后面指定的提示

關于JQuery表單驗證更多信息參考：菜鳥教程