使用Ajax验证Knockout_Knockout验证

介绍

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

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

背景

对于快速预览退房http://jsfiddle.net/FkxKK/

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

- 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验证基本验证所需的一样，最小值，最大值...等等之后

源码下载地址: http://dwtedx.com/download.html?bdkey=s/1c0ByAas 密码: msn9