使用Ajax验证Knockout_Knockout验证
2014-07-04 19:04:50  By: dwtedx

介绍

在Knockout，我们可以使用自定义验证，以验证您的视图模型。

但有些时候我们可能需要从服务端检查验证。在这里，我们将展示我们如何能够利用基因敲除验证与jQuery Ajax和服务器结束通话。

背景

对于快速预览退房

要执行我们使用的库，如本例中，

- jquery-2.1.1.js

- Knockout- 3.1.0.js

- knockout.validation.js

- jquery.mockjax.js嘲笑我们的ajax调用，这是一个令人兴奋的库来使用ajax的嘲讽。

使用代码

首先，我们将使用索引自定义的验证规则userNameUsed这样。

- VAL表示从HTML DOM绑定的值，otherValue什么样的价值，我们预期。

- $时，直到ajax调用完成后，确保SYNCHS ajax调用，并且该范围内的等待。

- IsUsed是从服务器返回，表明如果使用的名称已被使用或不使用（或比较你首选返回的对象或其属性。）

/*Validations*/ ko.validation.rules[userNameUsed] = { //val form binded value from html, otherVale what we wanted tobe validator: function (val, otherVal) { var isUsed; var json = JSON.stringify({ userName: val }); $.when( $.ajax({ url: /validation/IsUserNameUsed, dataType: "json", type: "POST", contentType: application/json; charset=utf-8, data: json, async: false, }) ).then(function (data, textStatus, jqXhr) { isUsed = (textStatus === success) ? data.IsUsed : null; }); return isUsed === otherVal; //if false error message would be shown }, message: This user name is already in use }; ko.validation.registerExtenders(); 使用此验证规则到我们的视图模型像这样，与其他验证规则

/*fields*/ self.userName = ko.observable().extend({ required: true, userNameUsed: false }); 正如我们所分配的userNameUsed：假的视图模型，意味着我们期待的结果是是假的

- 如果验证器的ajax调用data.IsUsed返回false，将显示错误消息

- 如果ajax调用失败或data.IsUsed返回true，将显示错误消息

我们会发现两个测试案例脚本/ mock.validationPage.js，因为我们没有使用任何真正的服务器来模仿我们的ajax调用。

取消注释在列表中的一个测试，如果验证是工作或没有。

这将是更好，如果我们使用AJAX验证基本验证所需的一样，最小值，最大值...等等之后

源码下载地址: ?bdkey=s/1c0ByAas 密码: msn9

若资源对你有帮助、浏览后有很大收获、不妨、你的鼓励是维持我不断写博客最大动力

想获取DD博客最新代码、你可以、关注DD博客微信公众号（ddblogs）

或者你也可以关注我的新浪微博、了解DD博客的最新动态：DD博客官方微博（dwtedx的微博）

如对资源有任何疑问或觉得仍然有很大的改善空间、可以对该博文进行评论、希望不吝赐教

为保证及时回复、可以使用博客留言板给我留言: DD博客留言板（dwtedx的留言板）

感谢你的访问、祝你生活愉快、工作顺心、欢迎常来逛逛