Translation: Using ASP. NET MVC 4, EF, Knockoutjs and Bootstrap design and development Site-4-authentication

Verify:

We are almost finished with the interface of our program. The remaining thing is to manage the validation issue when the user clicks "Save". Verification is the primary requirement, and today is the most ignorant application that will not overlook it. With proper validation, the user can know what data should be entered. Below, we will discuss the Knockoutjs Validation library, which can be downloaded from here. can also be obtained directly from NuGet,

Let's first look at the common validation scenarios and how to use them.

Here is an article on the principle of the Knockout extension: translation: Extending with the Knockout extender observables

Scenario 1: The name must be entered in the form

This. FirstName = Ko.observable (). Extend ({required:true});

Scenario 2: The name contains a maximum of 50 characters and contains at least 3 characters

This. FirstName = Ko.observable (). Extend ({maxlength:50, minlength:3});

Scenario 4: Age must be entered, must be greater than 18, less than

this. Age = Ko.observable (). Extend ({required:true, max:100, min:18}),  

Scenario 5: E-mail must be provided, The address must be the correct e-mail format

this. Email = Ko.observable (). Extend ({required:true, email:true}),  

Scenario 6: Birthday must be provided, date must be the correct date format

this. dateOfBirth = Ko.observable (). Extend ({required:true, date:true}),  

Scenario 7: Price must be provided, Must be the correct number or currency format

this. Price = Ko.observable (). Extend ({required:true, number:true}),  

Scenario 8: Phone number must be provided, And it must be the correct US format

Note: The correct US phone number is this format: 1–xdd–xdd–dddd
  "X" at the beginning is optional, including dashes, which are any number from 2 to 9 , D is any number.

this. Phone = Ko.observable (). Extend ({required:true, phoneus:true});  

Scenario 9:   & nbsp The arrival date must be greater than the departure date

This. ToDate = Ko.observable (). Extend ({     equal:function () {return (Val > $ (' #FromDate '). Val ())? Val:val + "|"});

Scenario 10: Phone number only accepts-+ () 0-9

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

Well, we've seen various types of validation scenarios and usage patterns, and now we're using them in our programs. Our validation rules are as follows:

var profile =function(profile) {var self =This; Self. profileID = ko.observable (profile). profileid:0). Extend ({required:True}); Self. FirstName = ko.observable (profile). FirstName: "). Extend ({required:True, maxlength:50}); Self. LastName = ko.observable (profile). LastName: "). Extend ({required:True, maxlength:50}); Self. Email = ko.observable 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 providing verification, when you click on "Save", the following will be shown:

We have implemented the UI section, still without any actual data access, creating UI parts without relying on any actual business logic, very good!

Next, we'll discuss how to implement database design and business logic using a layered structure.

Article posted: http://www.cnblogs.com/haogj/

Translation: Using ASP. NET MVC 4, EF, Knockoutjs and Bootstrap design and development Site-4-authentication