MVVM架構~knockoutjs系列之擴展ajax驗證~驗證數據是否存在

返回目錄

在大部分網站裏,用戶名都是惟一的,即當用戶註冊時,若是用戶輸入的名字不合法,咱們須要提示用戶,讓用戶再起個新名字,而這種複雜的驗證通常是經過JS來實現的,若是把它集成到ko裏,那就完美了.有了這個想法,我開始嘗試它,相信必定能夠成功的!

起初在設計時出現了不少問題,如ajax異步問題,延時處理問題,ajax返回值問題等等,通過幾回失敗後,在總結了相關知識後,終於設計出來了一個不錯的擴展,即 ajaxData驗證方式.

擴展ko.validation.js代碼

  kv.rules['ajaxData'] = {
        validator: function (val, ajaxMethod) {
            var result = true;
            $.when(ajaxMethod(val)).then(function (data) {
                result = kv.utils.isEmptyVal(val) || data; //val爲空走reqired邏輯,不爲空再走ajax邏輯
            });
            return result;
        },
        message: 'Please enter info is no corrent.'
    };

HTML代碼

function existUser(name) {
            return $.ajax({ //必須加return才能夠將它返回
                url: "/ef/IsNotExist?name=" + name,
                type: "get",
                dataType: "json",
                async: false,
                success: function (data) {
                    return data;
                }
            });
        }

調用方式

            self.UserName = ko.observable().extend({
                minLength: 2,
                maxLength: { params: 30, message: "名稱最大長度爲30個字符" },
                required: {
                    params: true,
                    message: "請輸入名稱"
                },
                ajaxData: {
                    params: existUser,
                    message: "用戶已經存在"
                }
            });

運行後的效果如圖

最後要說明的一點是,目前ajax只能使用同步方式,由於在ko.validation內部有一個機制,若是程序沒有返回,那麼驗證會返回false,即驗證失敗,如對於異步請求來講,它不會阻塞當前線程的執行,因此,它會直接輸出false,而不走咱們的驗證程序.

返回目錄