Use Knockout practice in ASP. net mvc 05, basic verification, mvcknockout

Use Knockout practice in ASP. net mvc 05, basic verification, mvcknockout

This document describes how to verify the View Model. The subscribe method of Knockout can register verification rules for View Model members.

 

@{
    ViewBag.Title = "Index";
    Layout = "~/Views/Shared/_Layout.cshtml";
}
<style type="text/css">
    .error {
        color: red;
    }
</style>
<input data-bind="value: name, valueUpdate: 'afterkeydown'"/>
<Span class = "error" data-bind = "visible: hasError"> the maximum length is 8! </Span>
@section scripts
{
    <script src="~/Scripts/knockout-2.2.0.js"></script>
    <script type="text/javascript">
 
// Create a View Model using the constructor
        var User = function() {
            this.name = ko.observable("darren");
            this.hasError = ko.observable(false);
// Register a method for name
            this.name.subscribe(function(newValue) {
                this.hasError(newValue && newValue.length > 8);
            }, this);
        };
        ko.applyBindings(new User());
    </script>
}

 

The above practices are a little cumbersome. Actually, using "Knockout. Validation" on NuGet is the best practice.

 

Install Knockout. Validation through NuGet

 

After the installation is complete, the following files are added to the Scripts folder.

 

Create a zh-CN.js In the Scripts folder for localization.

ko.validation.localize({
Required: 'mandatory field ',
Min: 'input value must be greater than or equal to {0 }',
Max: 'input value must be less than or equal to {0 }',
MinLength: 'enter at least {0} characters ',
MaxLength: 'The number of characters entered cannot exceed {0 ',
Pattern: 'check this value ',
Step: 'the value of each step is {0 }',
Email: 'invalid email address format ',
Date: 'date format is incorrect ',
DateISO: 'date format is incorrect ',
Number: 'enter a number ',
Digit: 'enter a number ',
PhoneUS: 'enter a valid mobile phone number (US )',
Equal: 'different input values ',
NotEqual: 'select another value ',
Unique: 'This value should be unique'
});

 

Knockout. Validation

 

□Required

 

@{
    ViewBag.Title = "Index";
    Layout = "~/Views/Shared/_Layout.cshtml";
}
<style type="text/css">
    .validationMessage {
        color: red;
    }
</style>
<input data-bind="value: name, valueUpdate: 'afterkeydown'"/>
@section scripts
{
    <script src="~/Scripts/knockout-2.2.0.js"></script>
    <script src="~/Scripts/knockout.validation.js"></script>
    <script src="~/Scripts/zh-CN.js"></script>
    <script type="text/javascript">
// Create a View Model using the constructor
        var User = function() {
            this.name = ko.observable("darren").extend({required:true});
        };
        ko.applyBindings(new User());
    </script>
}

 

□Minimum Value

This. name = ko. observable ("darren"). extend ({min: 2 });

 

□Maximum Value

This. name = ko. observable ("darren"). extend ({max: 99 });

 

□Minimum Length

This. name = ko. observable ("darren"). extend ({minLength: 3 });

 

□Maximum Length

This. name = ko. observable ("darren"). extend ({maxLength: 12 });

 

□Email

This. name = ko. observable ("darren"). extend ({email: true });

 

□Regular expression

This. name = ko. observable ("darren"). extend ({pattern: '^ [a-z0-9]. $ '});

 

□Equal

Var otherObj = ko. observable ();
Var myObj = ko. observable (). extend ({equal: otherObj });

Var myObj = ko. observable (). extend ({equal: 2 });

 

□Unequal

Var otherObj = ko. observable ();
Var myObj = ko. observable (). extend ({notEqual: otherObj });

Var myObj = ko. observable (). extend ({notEqual: 2 });

 

□Date

This. name = ko. observable (""). extend ({date: true });

 

□Number, including decimal point

This. name = ko. observable (""). extend ({number: true });

 

□Integer

This. name = ko. observable (""). extend ({digit: true });

 

□Multiple verification rules at the same time

This. name = ko. observable (). extend ({
Required: true,
MaxLength: 3
});

 

□Verify the View Model instance

 

@{
    ViewBag.Title = "Index";
    Layout = "~/Views/Shared/_Layout.cshtml";
}
<style type="text/css">
    .validationMessage {
        color: red;
    }
</style>
<input data-bind="value: name, valueUpdate: 'afterkeydown'"/><br/>
<Button id = "btn"> submit </button>
@section scripts
{
    <script src="~/Scripts/knockout-2.2.0.js"></script>
    <script src="~/Scripts/knockout.validation.js"></script>
    <script src="~/Scripts/zh-CN.js"></script>
    <script type="text/javascript">
// Create a View Model using the constructor
        var User = function() {
            this.name = ko.observable().extend({
                required: true,
                maxLength: 3
            });
        };
        var user = new User();
        ko.applyBindings(user);
        ko.validatedObservable(user);
        $(function() {
            $('#btn').on("click", function() {
                if (user.isValid) {
                    alert('ok');
                }
            });
        });
    </script>
}

In the preceding example, the ko. validatedObservable method must be used before the isValid method can be used to determine whether verification is successful.

References:
Https://github.com/Knockout-Contrib/Knockout-Validation/wiki

How to verify the text box in aspnet mvc Mode

... Verify with JS or use verification controls.
However, the client verifies the service. 3. The client also verifies the service. Because some Browsers Do not support Javascript
Client Verification:
<Script language = "javascript" type = "text/javascript">
Function fn ()
{
Var str = document. getElementById ("TextBox1"). value;

If (str. length = 0)
{
Alert ("Enter cannot be blank ");
Document. getElementById ("TextBox1"). focus ();
Return false;
}
}
</Script>
 
In aspnet mvc, how does model verification process arrays?

If I do not understand the meaning of the question, the author should have such a model:
Public class Tgghfbf // The name of the building owner with great Modification
{
[EachIsNumberInStringArray] // The definition of this feature will appear below
Public string [] Ck {get; set ;}
}

Then there is the form that the poster wants to POST:
@ Using (Html. BeginForm ())
{
<Input type = "checkbox" name = "Tgghfbf. Ck" value = "1"/>
<Input type = "checkbox" name = "Tgghfbf. Ck" value = "2 tgghfbf"/>
<Input type = "checkbox" name = "Tgghfbf. Ck" value = "3"/>
<Input type = "submit" value = "submit"/>
}

What the landlord wants to do is to verify the user's check box in an "elegant" way, this elegant method is indeed quite a lot (search Self-validating Models and Validation Provider). Now we only use the example mentioned above:
As mentioned above, define a verification feature (which can be applied to a model or a model attribute. Here I define a verification feature for a model attribute, to learn about the verification features applied to the model, search for asp.net mvc model validation attribute. The following is the code for this feature:
Public class EachIsNumberInStringArray: ValidationAttribute
{
Public override bool IsValid (object value) // this method is called when the model is bound.
{
If (value = null) // if the user does not select any check box, he/she enters all numbers.
{// Can be modified based on your business needs
Return true;
}

String [] _ value = value as string []; // we operate on a string array.

Foreach (var item in _ value)
{
Regex regex = new Regex (@ "^ \ d * $"); // you want to write a regular expression correctly.
If (! Regex. IsMatch (item) // if the user selects a non-numeric ckeck box,
{... Remaining full text>