淘汰验证自定义消息模板的问题

Problems with knockout-validation custom message template

本文关键字：问题 验证 自定义消息 淘汰      更新时间：2023-09-26

我没有使用过Knockout Validation，我正试图了解可以用它做什么。

我想弄清楚，如果有可能显示一个图标，而不是一个错误信息输入标签的权利，当有一个错误。并且，如果用户将鼠标悬停在图标上，则显示错误消息。

有人这样做过或有一个想法如何实现这一点?

谢谢。

编辑:(我正在尝试做的更详细的例子)

假设我的视图模型中有以下内容:

var firstName = ko.observable().extend({required: true});

我的HTML: 

<input data-bind="value: firstName" />

我的理解是，如果名字文本框留空，那么(默认情况下)将在文本框的右侧显示一些文本，说明该字段是必需的。

我想了解的是如何改变显示错误的默认行为文本在右边显示图标在右边，当鼠标悬停时，会弹出错误信息。

开头应该是这样的:

<div data-bind="validationOptions: {messageTemplate: 'myCustomTemplate'}">    
    <input data-bind="value: firstName" />
    <input data-bind="value: lastName" /> //also required
</div>
<div id='myCustomTemplate'>
    //This icon should only display when there is an error
    <span class="ui-icon ui-icon-alert" style="display: inline-block"/>
    //css/javascript would display this when user hovers over the above icon
    <span data-bind="validationMessage: field"  />  
</div>

我不知道我是否正确使用了messageTemplate功能。我也不知道如何在customTemplate中绑定文本，以便为每个错误显示正确的错误消息。姓、名和名可以有自定义的错误消息。如果它们都使用相同的模板，那么模板如何容纳自定义错误消息?

可以在鼠标悬停时显示图标并显示错误信息。

在一个项目中，我们正在做类似的事情。我们显示一个带有错误编号的徽章，但我们使用decorateElement突出显示字段，并使用errorsAsTitleOnModified在悬停在输入上时显示错误。

要创建一个错误消息模板，你应该把你的模板包装在一个脚本标签中。它的工作原理类似于ko模板绑定的模板。

在模板中，你可以通过引用'field'来访问验证过的可观察对象。错误信息存储在你的可观察对象的error属性中。

<script type="text/html" id="myCustomTemplate">
    <span data-bind="if: field.isModified() && !field.isValid(), 
                     attr: { title: field.error }">X</span>
</script>

我已经创建了一个小提琴来显示这个动作:http://jsfiddle.net/nuDJ3/180/

相关文章：