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