In the first two articles, we experienced basic validation and custom validation of knockout. This article customizes the display location and content of the verification information.
Customize where validation information is displayed
Typically, the validation information for knockout immediately follows input, and the Validationmessage property allows you to customize the display location of the validation information.
@{
Viewbag.title = "Index";
Layout = "~/views/shared/_layout.cshtml";
}
<style type= "text/css" >
. Error {
}
</style>
<div>
<input type= "text" data-bind= "value:name"/>
class= "error" data-bind= "validationmessage:name" ></p>
</div>
@section scripts
{
<script src= "~/scripts/knockout-3.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 function
var Product = function () {
this. Name = Ko.observable (). Extend ({minlength:3});
};
Create an instance
New Product ();
Verify Settings
var knockoutvalidationsettings = {
false,
false,
Errormessageclass: ' Error ',
Errorelementclass: ' Error ',
Errorclass: ' Error ',
true,
false,
true,
true,
True
};
true);
Binding
Ko.applybindings (product);
$ (function () {
false;
});
</script>
}
Above
The validation information is displayed on input with the Data-bind attribute value of Validationmessage:name
The knockout-validation must be re-initialized with Ko.validation.init () because it is reset
Insertmessages indicates whether to display the verification information in the location immediately following input
Decorateelement indicates if you want to add class= "error" to input
Customizing the content of validation information
If you want to rewrite the contents of the validation information, modify the following:
var Product = function () {
This params: 3, message: " I say minimum length is 3"});
};
Using knockout Practice 07 in ASP., customizing the location and content of the validation information