本文我们将介绍使用  实现一些基本的数据验证。就如我们在标题里提到的，我们会使用两种方法来创建数据验证方法。

• 使用自定义方法，不需要任何插件
• 最简单的方法是使用已有的插件

如果你刚刚接触 Knockout.js，强烈建议你阅读我之前的 ，那篇文章中我分享了一些关于 Knockout.js 的基本知识。本文我们使用  进行开发，希望你能喜欢。现在开始。

源码下载

第 1 段（可获 1.23 积分）

0

创建 HTML 页面

要使用 Knockout.js 首先需要一个页面。在此之前请先从 NuGet 上安装 Knockout.js 和 jQuery 。

现在创建一个 JavaScript 文件，并在页面中引入：

Knockout.js 数据验证之无插件版本

打开你的 JS 文件 (Validations-Without-Plugin.js)，这是我们编写脚本的地方。首先，创建视图模型，并使用 tje applyBindings 函数进行绑定。 

第 2 段（可获 1.09 积分）

0

$(function () {    function myViewModel(firstName, lastName, email) { this.txtFirstName = ko.observable(firstName); this.txtLastName = ko.observable(lastName); this.txtEmail = ko.observable(email); }; ko.applyBindings(new myViewModel("Sibeesh", "Venu", "sibikv4u@gmail.com")); });

接下来创建视图：

  
           
     
 First Name:  
 Last Name:  
 Email:  
  

第 3 段（可获 0.08 积分）

0

如果打开此页面就能看到视图上已经显示了我们之前在视图模型中定义的数据（你还记得使用 observable() 吗?)

到目前为止一切都很好。接下来需要更新视图模型并创建一些填充剂。

Knockout.js extenders (填充剂) 是最简单的用来给观察值提供额外功能的方式。可以是任何东西，在这里我们为观察值或者是控制器创建一些验证器 。

我们可以创建一个填充剂并使用如下代码来更新视图：

$(function () {    ko.extenders.isRequired = function (elm, customMessage) { //add some sub-observables to our observable elm.hasError = ko.observable(); elm.message = ko.observable(); //This is the function to validate the value entered in the text boxes function validateValueEntered(valEntered) { elm.hasError(valEntered ? false : true); //If the custom message is not given, the default one is taken elm.message(valEntered ? "" : customMessage || "I am required �� "); } //Call the validation function for the initial validation validateValueEntered(elm()); //Validate the value whenever there is a change in value elm.subscribe(validateValueEntered); return elm; }; ko.extenders.isEmail = function (elm, customMessage) { //add some sub-observables to our observable elm.hasError = ko.observable(); elm.message = ko.observable(); //This is the function to validate the value entered in the text boxes function validateEmail(valEntered) { var emailPattern = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{ 1,3}\.[0-9]{ 1,3}\.[0-9]{ 1,3}\.[0-9]{ 1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{ 2,}))$/; //If the value entered is a valid mail id, return fals or return true elm.hasError((emailPattern.test(valEntered) === false) ? true : false); //If not a valid mail id, return custom message elm.message((emailPattern.test(valEntered) === true) ? "" : customMessage); } //Call the validation function for the initial validation validateEmail(elm()); //Validate the value whenever there is a change in value elm.subscribe(validateEmail); return elm; }; function myViewModel(firstName, lastName, email) { this.txtFirstName = ko.observable(firstName).extend({ isRequired: "You missed First Name" }); this.txtLastName = ko.observable(lastName).extend({ isRequired: "" }); this.txtEmail = ko.observable(email).extend({ isEmail: "Not a valid mail id" }); }; ko.applyBindings(new myViewModel("Sibeesh", "Venu", "sibikv4u@gmail.com")); });

第 4 段（可获 1.16 积分）

0

这个代码 .extend({ isRequired: “You missed First Name” }); 用来调用我们刚创建的填充剂。第一个参数是我们创建的填充剂的名称，第二个参数是一个自定义消息。我在注释里对代码进行了解释，如果你有任何问题或者疑问可以直接在评论里发表。现在是更新视图的时候了。

  
            
     
 First Name:   
 Last Name:   
 Email:   
  

第 5 段（可获 0.73 积分）

0

每个可观测值有其独立的 hasError 和消息属性。你是否注意到了我们在每个控件的 data-bind 事件中用了 valueUpdate: “afterkeydown” ？这是用于初始的数据验证。接下来我们运行程序并查看结果是否正确。

使用插件实现 Knockout.js 验证

因为要用到插件，我们必须先从 NuGet 上安装这些插件。你可以从  获得所需插件。

现在创建视图模型

$(function () {    function myViewModel(firstName, lastName, email) { this.txtFirstName = ko.observable(firstName).extend({ required: true }); this.txtLastName = ko.observable(lastName).extend({ required: false }); this.txtEmail = ko.observable(email).extend({ email: true }); }; ko.applyBindings(new myViewModel("Sibeesh", "Venu", "sibikv4u@gmail.com")); });

第 6 段（可获 1.06 积分）

0

你可以看到，有其他我们创建的文件相比较，这里只有简单数行代码。现在创建视图：

  
             
     
 First Name:  
 Last Name:  
 Email:  
  

第 7 段（可获 0.33 积分）

0

别忘了在页面中引入 knockout.validation.js 脚本文件。如果一切准备就绪，就可以运行程序并查看输出结果。

今天就讲这么多。你可以下载本文源码。

参考资料

另请参阅