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

介绍

在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

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

想获取DD博客最新代码、你可以扫描下方的二维码、关注DD博客微信公众号(ddblogs)

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

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

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

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


快速评论


技术评论

  • 该技术还没有评论、赶快抢沙发吧...
DD记账
top
+