翻譯：使用 ASP.NET MVC 4, EF, Knockoutjs and Bootstrap 設計和開發站點 - 4 - 驗證

原文地址：http://ddmvc4.codeplex.com/

原文名稱：Design and Develop a website using ASP.NET MVC 4, EF, Knockoutjs and Bootstrap

驗證:

快要完成我們程序的界面部分了。剩下的事情就是在用戶點擊 "保存" 的時候管理驗證問題了。驗證是主要需求，今天就是最無知的應用也不會忽視它。通過正確的驗證，用戶可以知道應該輸入什么數據。下面，我們將會討論 KnockoutJS Validation 庫，可以通過從這里下載。也可以直接通過 NuGet 獲取，

先讓我們看看常用的驗證場景，以及如何使用。

這里有篇文章討論 Knockout 擴展的原理：翻譯：使用 Knockout 擴展器擴展 observables

Scenario 1: 表單中必須輸入名字

this.FirstName = ko.observable().extend({ required: true });

Scenario 2: 名字最多包含 50 個字符，至少包含 3 個字符

this.FirstName = ko.observable().extend({ maxLength: 50, minLength:3});

Scenario 4: 年齡必須輸入，必須大於 18 ，小於 100

this.Age = ko.observable().extend({ required: true, max: 100, min:18 });

Scenario 5: 必須提供電子郵件，地址必須是正確的電子郵件格式

this.Email = ko.observable().extend({ required: true, email: true });

Scenario 6: 必須提供生日，日期必須是正確的日期格式

this.DateOfBirth = ko.observable().extend({ required: true, date: true });

Scenario 7: 必須提供價格，必須是正確的數字或者貨幣格式

this.Price = ko.observable().extend({ required: true, number: true });

Scenario 8: 必須提供電話號碼，而且必須是正確的美國格式

Note: 正確的美國電話號碼是這種格式: 1–xdd–xdd–dddd
 "1–" 在開始部分是可選的，包括短划線，x 是 2 到 9  的任意數字，d 為任意數字.

this.Phone = ko.observable().extend({ required: true, phoneUS: true });

Scenario 9:     到達日期必須大於出發日期

this.ToDate = ko.observable().extend({ 
    equal: function () { return (val > $(‘#FromDate’).val()) ? val : val + "|" } 
});

Scenario 10: 電話號碼只接受 -+ () 0-9

var regex = /\(?([0-9]{3})\)?([ .-]?)([0-9]{3})\2([0-9]{4})/
this.PhoneNumber = ko.observable().extend({ pattern: regex });

好了，我們已經看到各種類型的驗證場景和使用方式；現在在我們的程序中使用它們。我們的驗證規則如下所示：

var Profile = function (profile) {
    var self = this;
    self.ProfileId = ko.observable(profile ? profile.ProfileId : 0).extend({ required: true });
    self.FirstName = ko.observable(profile ? profile.FirstName : '').extend({ required: true, maxLength: 50 });
    self.LastName = ko.observable(profile ? profile.LastName : '').extend({ required: true, maxLength: 50 });
    self.Email = ko.observable(profile ? profile.Email : '').extend({ required: true, maxLength: 50, email: true });
    self.PhoneDTO = ko.observableArray(profile ? profile.PhoneDTO : []);
    self.AddressDTO = ko.observableArray(profile ? profile.AddressDTO : []);
};
 
var PhoneLine = function (phone) {
    var self = this;
    self.PhoneId = ko.observable(phone ? phone.PhoneId : 0);
    self.PhoneTypeId = ko.observable(phone ? phone.PhoneTypeId : undefined).extend({ required: true });
    self.Number = ko.observable(phone ? phone.Number : '').extend({ required: true, maxLength: 25, phoneUS: true });
};
 
var AddressLine = function (address) {
    var self = this;
    self.AddressId = ko.observable(address ? address.AddressId : 0);
    self.AddressTypeId = ko.observable(address ? address.AddressTypeId : undefined).extend({ required: true });
    self.AddressLine1 = ko.observable(address ? address.AddressLine1 : '').extend({ required: true, maxLength: 100 });
    self.AddressLine2 = ko.observable(address ? address.AddressLine2 : '').extend({ required: true, maxLength: 100 });
    self.Country = ko.observable(address ? address.Country : '').extend({ required: true, maxLength: 50 });
    self.State = ko.observable(address ? address.State : '').extend({ required: true, maxLength: 50 });
    self.City = ko.observable(address ? address.City : '').extend({ required: true, maxLength: 50 });
    self.ZipCode = ko.observable(address ? address.ZipCode : '').extend({ required: true, maxLength: 15 });
};

提供驗證之后，在點擊 "保存” 的時候，將會如下所示：

我們已經實現了 UI 部分，仍然沒有任何實際的數據訪問，創建 UI   部分沒有依賴任何實際的業務邏輯，非常棒！

下一步，我們將會討論如何使用分層的結構實現數據庫設計和業務邏輯。