翻译:使用 ASP.NET MVC 4, EF, Knockoutjs and Bootstrap 设计和开发站点 - 4 - 验证

验证:

快要完成我们程序的界面部分了。剩下的事情就是在用户点击 "保存" 的时候管理验证问题了。验证是主要需求,今天就是最无知的应用也不会忽视它。通过正确的验证,用户可以知道应该输入什么数据。下面,我们将会讨论 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   部分没有依赖任何实际的业务逻辑,非常棒!

下一步,我们将会讨论如何使用分层的结构实现数据库设计和业务逻辑。

文章转载于:http://www.cnblogs.com/haogj/

郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。