在ASP.NET MVC中使用Knockout实践07,自定义验证信息的位置与内容_.NET_编程开发_程序员俱乐部

中国优秀的程序员网站程序员频道CXYCLUB技术地图
热搜:
更多>>
 
您所在的位置: 程序员俱乐部 > 编程开发 > .NET > 在ASP.NET MVC中使用Knockout实践07,自定义验证信息的位置与内容

在ASP.NET MVC中使用Knockout实践07,自定义验证信息的位置与内容

 2014/11/3 11:18:28  Darren Ji  程序员俱乐部  我要评论(0)
  • 摘要:在前两篇中,体验了Knockout的基本验证和自定义验证。本篇自定义验证信息的显示位置与内容。自定义验证信息的显示位置通常,Knockout的验证信息紧跟在input后面,通过validationMessage属性可以自定义验证信息的显示位置。@{ViewBag.Title="Index";Layout="~/Views/Shared/_Layout.cshtml";}<styletype="text/css">.error{color:red;}</style><
  • 标签:

在前两篇中,体验了Knockout的基本验证和自定义验证。本篇自定义验证信息的显示位置与内容。

 

自定义验证信息的显示位置

 

通常,Knockout的验证信息紧跟在input后面,通过validationMessage属性可以自定义验证信息的显示位置。

monospace; width: 100%; margin: 0em; background-color: #f0f0f0">@{
    ViewBag.Title = "Index";
    Layout = "~/Views/Shared/_Layout.cshtml";
}
<style type="text/css">
    .error {
        color: red; 
    }
</style>
<div>
    <input type="text" data-bind="value: name"/>
    <p 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">
        
        //使用构造函数创建一个View Model
        var Product = function () {
            this.name = ko.observable().extend({ minLength: 3 });
        };
     
        //创建实例
        var product = new Product();
        //验证设置
        var knockoutValidationSettings = {
            insertMessages: false,
            decorateElement: false,
            errorMessageClass: 'error',
            errorElementClass: 'error',
            errorClass: 'error',
            errorsAsTitle: true,
            parseInputAttributes: false,
            messagesOnModified: true,
            decorateElementOnModified: true,
            decorateInputElement: true
        };
        ko.validation.init(knockoutValidationSettings, true);
       
        //绑定
        ko.applyBindings(product);
       
        $(function () {
            ko.decorateElement = false;
        });
    </script>
}

以上,
● 把验证信息显示在了data-bind属性值为validationMessage: name的input上
● 由于重新设置了Knockout-Validation,必须使用ko.validation.init()重新初始化
● insertMessages表示是否把验证信息显示在紧跟input的位置
● decorateElement表示是否要为input加上class="error"

12

 

 

自定义验证信息的内容

 

如果想重写验证信息的内容,修改如下:

        var Product = function () {
            this.name = ko.observable().extend({ minLength: { params: 3, message: "要我说最小长度是3" } });
        };

13

  • 相关文章
发表评论
用户名: 匿名