原文地址: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 部分沒有依賴任何實際的商務邏輯,非常棒!
下一步,我們將會討論如何使用分層的結構實現資料庫設計和商務邏輯。