MVVM架構~knockoutjs系列之擴展ajax驗證~驗證輸入數據是否與后臺數據相等

文章出處

在看這篇文章之前,你有必要先看我之前的文章,之前文章是將一個方法以參數的形式傳給KO,然后返回一個真假值,去做驗證,這類似于面向對象語言里的委托,在JS里我們叫它回調方法,本篇文章與前一文章不同,需要有兩個參數,其一是遠程方法的簽名(JS方法),其二是已知要比較的數據(可能是加密后的密碼數據),當用戶輸入文字后,它將會調用JS方法獲取遠程數據,以比較原數據與你輸入的數據是否匹配.

知識點:以對象作為參數進行傳遞

ko.validation.js的擴展

   //ajax相等驗證
    kv.rules['ajaxDataEqual'] = {
        validator: function (val,params) {
            var result = true;//默認為驗證通過
            $.when(params.ajaxMethod(val)).then(function (data) {
                result = kv.utils.isEmptyVal(val) || data == kv.utils.getValue(params.otherValue); //val為空走reqired邏輯,不為空再走ajax邏輯
            });
            return result;
        },
        message: 'Two value must equal.'
    };

HTML代碼

<form id="form1" style="width: 800px;">
    <div class="editor-label">
        提現金額：
    </div>
    <div class="editor-field" style="width: 700px">
        <input name="Money" data-bind='value: Money' />
        <span class="validationError" data-bind="validationMessage:Money"></span>
    </div>
    <div class="editor-label">
        支付密碼：
    </div>
    <div class="editor-field" style="width: 700px">
        <input name="Paypassword" data-bind='value: Paypassword' />
        <span class="validationError" data-bind="validationMessage:Paypassword"></span>
    </div>
    <p>
        <input type="button" data-bind="click:cash" value="提現" />
    </p>
</form>

相關JS調用時的代碼

<script type="text/ecmascript">
        function getpassword(key) {
            return $.ajax({
                url: "/ef/GetPayPassword",
                data: { key: key },
                type: "get",
                dataType: "json",
                async: false,
                success: function (data) {
                    return data;
                }
            });
        }
        var userWithdraw = function () {

            var self = this;
            ko.validation.configure({//ko.validation相關配置
                insertMessages: false
            });

            self.Money = ko.observable().extend({
                min: { params: 1, message: "金額最小為1..." },
                max: { params: 1000, message: "金額最大為1000..." },
                required: {
                    params: true,
                    message: "請輸入提現金額..."
                }
            });

            self.Paypassword = ko.observable().extend({

                ajaxDataEqual: { params: { ajaxMethod: getpassword, otherValue: "zzl123" }, message: "支付密碼不正確..." },//注意，這只是個實例，說明ajaxDataEqual的用法，實現中，密碼不應該保留到前端
                required: {
                    params: true,
                    message: "請輸入支付密碼..."
                }
            });

            self.cash = function () {
                self.errors = ko.validation.group(self);
                if (self.isValid()) {
                    alert("可以進行提現")
                } else {

                    self.errors.showAllMessages();
                }
            }
        }
        ko.applyBindings(new userWithdraw());
    </script>

最后程序運行的結果

本實例可以幫助我們完成類似支付,提現等功能模塊的驗證工作.

對于上面的業務大家可能會有些疑惑，怎么把密碼暴露到前端了，當然這只是個實例，在項目中，我們應該使用ajaxData進行真假值的驗證，密碼的驗證應該放到后端的方法里，下面是項目中的代碼

   self.Paypassword = ko.observable().extend({
                ajaxData: { params: confirmPassword, message: "支付密碼不正確..." },
                required: {
                    params: true,
                    message: "請輸入支付密碼..."
                }
            });

   function confirmPassword(key) {
            return $.ajax({
                url: "/ef/ConfirmPassword",
                data: { key: key },
                type: "get",
                dataType: "json",
                async: false,
                success: function (data) {
                    return data;
                }
            });
        }

下面是Ｃ#后端代碼，完成了密碼的驗證

  /// <summary>
        /// 得到用戶的支付密碼
        /// 只返回真假值，不返回加密后的密碼
        /// </summary>
        /// <param name="userid"></param>
        /// <returns></returns>
        public JsonResult ConfirmPassword(string key)
        {
            string oldPassword = "zzl123";//! 這個密碼一般是通過當前登陸ＩＤ從數據庫里查詢出來的，不會暴露在前端
            if (key == oldPassword)
                return Json(true, JsonRequestBehavior.AllowGet);
            else
                return Json(false, JsonRequestBehavior.AllowGet);
        }