MVVM架构~knockoutjs系列之扩展ajax验证~验证数据是否存在

时间:2022-01-18 03:52:05

返回目录

在大部分网站里,用户名都是唯一的,即当用户注册时,如果用户输入的名字不合法,我们需要提示用户,让用户再起个新名字,而这种复杂的验证一般是通过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: ,
maxLength: { params: , message: "名称最大长度为30个字符" },
required: {
params: true,
message: "请输入名称"
},
ajaxData: {
params: existUser,
message: "用户已经存在"
}
});

运行后的效果如图

aaarticlea/png;base64,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" alt="" />

最后要说明的一点是,目前ajax只能使用同步方式,因为在ko.validation内部有一个机制,如果程序没有返回,那么验证会返回false,即验证失败,如对于异步请求来说,它不会阻塞当前线程的执行,所以,它会直接输出false,而不走我们的验证程序.

返回目录