中文字幕精品亚洲无线码二区,国产黄a三级三级三级看三级,亚洲七七久久桃花影院,丰满少妇被猛烈进入,国产小视频在线观看网站

MVVM架構~knockoutjs系列(lie)之(zhi)擴展ajax驗(yan)證(zheng)~驗(yan)證(zheng)輸(shu)入數據是否與(yu)后臺數據相等

返回目錄

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

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

ko.validation.js的擴展

   //ajax相(xiang)等驗證
    kv.rules['ajaxDataEqual'] = {
        validator: function (val,params) {
            var result = true;//默認(ren)為驗證通過
            $.when(params.ajaxMethod(val)).then(function (data) {
                result = kv.utils.isEmptyVal(val) || data == kv.utils.getValue(params.otherValue); //val為空(kong)走reqired邏輯,不為空(kong)再走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">
        支付密碼(ma):
    </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相關(guan)配置
                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>

最后程序運行的結果

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

對于上面的(de)業(ye)務(wu)大家可(ke)能(neng)會(hui)有些疑惑,怎么(me)把密碼(ma)暴露到前端了(le),當然這只是個實例,在(zai)項目(mu)中,我們應該使用(yong)ajaxData進行(xing)真(zhen)假值的(de)驗證,密碼(ma)的(de)驗證應該放到后端的(de)方法里,下面是項目(mu)中的(de)代碼(ma)

   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;
                }
            });
        }

下面是C#后(hou)端代碼(ma)(ma),完成了密碼(ma)(ma)的驗證(zheng)

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

 

返回目錄

posted @ 2014-05-22 11:13  張占嶺  閱讀(1920)  評論(1)    收藏  舉報