淘汰验证消息显示为 [object Object]

Posted

技术标签:

【中文标题】淘汰验证消息显示为 [object Object]【英文标题】:Knockout validationMessage appears as [object Object] 【发布时间】:2020-04-22 06:41:38 【问题描述】:

使用 Knockout,我想控制验证消息在屏幕上的显示位置。当我这样做时,不是显示消息文本,而是显示 [object Object]。这是我的代码:

HTML

<input id="inputValue" class="form-control form-control-xs data-bind="validationElement: val""
                       data-bind="event:  keyup: maskNumber(event) "
                       placeholder="Enter Secret Number"
                       />

<p class="validationMessage" data-bind="validationMessage: val"></p>


@*hidden input to store field to store real value*@
<span >
      "<input id="realInputValue" type="hidden" data-bind="validationOptions: insertMessages: false, value: val" />
</span>

TS

this.val.extend(
            
                maxLength: 5,
                minLength: 5,
                required:  message: 'This number is required' ,
                pattern: 
                    params: /^\d+$/,
                    message: 'Please enter only numeric digits'
                
            );

我希望底部隐藏输入字段的错误消息显示在顶部可见输入字段下方。

在将实际数字存储在隐藏的“realInputValue”字段中之后,maskNumber 函数将 inputValue 字段中的每个数字转换为星号 (*)。

我查看了this example 并使用了the documentation 以及其他资源,但无论我尝试什么,当我尝试使用validationMessage 时,我总是看到错误消息为[object Object]。当我不使用validationMessage 并让错误消息转到其默认位置时,我可以很好地看到错误消息的文本。

如何使实际消息出现而不是 [object Object]?

【问题讨论】:

它验证的输入是什么?触发了什么验证规则?您是否定义了任何自定义规则?您是否更改了任何默认消息? 部分问题可能是第一个输入字段上的 data-bind= 属性重复 我建议对验证对象执行 JSON.stringify 以查看其中的内容,您很可能只是打印一个对象而不是其中的值。同样正如 Nathan 所说,您在第一个输入中重复了 data-bind,这是错误的做法。 @JeffMercado 我已经包含了具有验证规则和自定义消息的 .ts 文件。输入只是用户可以在字段中键入的任何数字。 .ts 代码是我使用的自定义规则和消息的范围 @NathanFisher 我删除了输入中重复的data-bind,我仍然得到[object Object]。但是,输入位于具有data-bind="validationElement: val" 的 div 内。我删除了 div 中的数据绑定,问题仍然存在 【参考方案1】:

深入研究代码后,我发现了问题。包含错误消息的段落不应为&lt;p class="validationMessage" data-bind="validationMessage: val"&gt;&lt;/p&gt;

应该是&lt;p class="validationMessage" data-bind="validationText: val"&gt;&lt;/p&gt;

本质上,您需要使用validationText 而不是validationMessage。我在文档中的任何地方都没有找到这个。希望这对某人有所帮助。

【讨论】:

以上是关于淘汰验证消息显示为 [object Object]的主要内容,如果未能解决你的问题,请参考以下文章

Axios - 显示验证返回的错误是 [object Object]

使用 jquery ajax 从验证中取回对象 Object

分配的响应数据显示 [object object] React Native

insertAdjacentHTML 为函数显示 [object, Object]

uniAppuni.chooseLocation(OBJECT)获取位置{errMsg: ‘getLocation:fail 签名验证失败‘}

如何使用反应表单挂钩验证反应日期选择器