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 model verification, how does one handle the drop-down list?

What is simulated verification. Prompt the user to select when the user has not selected