在ASP.NET MVC中使用Knockout實踐07，自定義驗證資訊的位置與內容

在前兩篇中，體驗了Knockout的基本驗證和自定義驗證。本篇自定義驗證資訊的顯示位置與內容。

 

自定義驗證資訊的顯示位置

 

通常，Knockout的驗證資訊緊跟在input後面，通過validationMessage屬性可以自定義驗證資訊的顯示位置。

@{
    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"

 

 

自定義驗證資訊的內容

 

如果想重寫驗證資訊的內容，修改如下：

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