實時驗證用戶名是否重復

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

JQuery ajax方法

此方法可以提交任何地方的數據到后臺，實現代碼如下

在這之前需要加載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");
        }
    })
});

實現思路：

1. 首先是創建一個自運行函數

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

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

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

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

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

JQuery 表單驗證

此方法可提交form表單內指定的數據到后臺，此外表單功能對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: "請輸入環境名稱",
                remote: "此名稱已經被使用"
            }
        }
    });
});

實現思路：

1. 同樣也是創建了一個自執行函數，調用了ready方法，此方法又調用了一個函數，至于為什么是ready方法，自行查找相關資料

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

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

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

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

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

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