傳回目錄
在看這篇文章之前,你有必要先看我之前的文章,之前文章是将一個方法以參數的形式傳給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);
} 作者：倉儲大叔，張占嶺，
榮譽：微軟MVP
QQ：853066980
支付寶掃一掃，為大叔打賞!
