Translation: Design and Development Sites Using ASP. net mvc 4, EF, Knockoutjs and Bootstrap

Verification:

We are about to complete the Interface part of our program. The other thing is to manage the verification problem when the user clicks "save. Verification is the main requirement. Today is the most ignorant application and it will not be ignored. After correct verification, the user can know what data should be entered. Next, we will discuss the KnockoutJS Validation library, which can be downloaded from here. It can also be obtained directly through NuGet,

Let's take a look at common verification scenarios and how to use them.

Here is an article about how the Knockout extension works.

Scenario 1: The name must be entered in the form.

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

Scenario 2: The name can contain up to 50 characters and contain at least 3 Characters

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

Scenario 4: age must be input, must be greater than 18, less than 100

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

Scenario 5: the email address must be in the correct email format.

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

Scenario 6: birthday is required, and the date must be in the correct date format

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

Scenario 7: price is required and must be in the correct numeric or currency format

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

Scenario 8: The phone number must be provided and must be in the correct us format.

Note: The correct us phone number is in this format :--.
"1-" is optional at the beginning, including a short line, x is any number ranging from 2 to 9, and d is any number.

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

Scenario 9: the arrival date must be later than the departure date

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

Scenario 10: The phone number can only be-+ () 0-9

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

Well, we have seen various verification scenarios and usage methods; now we use them in our programs. Our verification rules are as follows:

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 });};

After verification is provided, when you click "save", it will be as follows:

We have implemented the UI part, and there is still no actual data access. The UI part created does not depend on any actual business logic, which is great!

Next, we will discuss how to use a layered structure to implement database design and business logic.

Article reproduced in: http://www.cnblogs.com/haogj/