Kendo Knockout：NumericTextBox 在插入超过最大值时显示验证消息答案

【问题标题】：Kendo Knockout: NumericTextBox show validation message on inserting more than max valueKendo Knockout：NumericTextBox 在插入超过最大值时显示验证消息
【发布时间】：2013-04-09 14:51:22
【问题描述】：

我正在使用 kendo-knockout 库。我有一个最大值为 20 的数字文本框小部件。如果您输入更大的值，小部件会将其四舍五入为最大值。因此，如果您使用键盘输入值 50 并从输入中失去焦点或保存表单，则该值将四舍五入为最大值 20。

我希望当您在小部件文本框中输入更大的值时显示错误消息。为此，我将配置更改为：

<input type="number"  
data-bind="kendoNumericTextBox: { value: price, min="1", max="20" }" />

到

<input type="number"  min="1" max="20"
data-bind="kendoNumericTextBox: { value: price }" />

但最终的结果是一样的。该值已四舍五入。如果我删除小部件：

<input type="number"  min="1" max="20" />

我得到了想要的行为。这可以使用数字文本框小部件来完成吗？

这里是 jsfiddle：

http://jsfiddle.net/2Qnv7/29/

为澄清起见，我添加了不带小部件的所需行为。谢谢

【问题讨论】：

标签： html knockout.js kendo-ui kendonumerictextbox

【解决方案1】：

您可以在更改时绑定事件，但 Kendo 不会发送无效值，因此您必须进行一些额外的修改以存储类型值（例如通过绑定模糊事件），然后比较存储的值和限制。

这里是 HTML

Kendo numeric text box:
<input type="number"  min="1" max="20"
data-bind="event: { blur: blur } ,kendoNumericTextBox: { value: price, change: change }" />

Regular Input:
<input type="number"  min="1" max="20" />

    <button type="submit">Submit</button>

</form>

KO javascript模型

var ViewModel = function() {
   this.price = ko.observable(11);
    this.blur = function(model, event) {
        $(event.target).data({ _prevValue: event.target.value });
    }
    this.change = function() {
        var _prevValue  = $(this.element).data('_prevValue') - 0;
        if (_prevValue > this.options.max || _prevValue < this._value) {
            alert(_prevValue + ' is out of range');
        }
    }
};

ko.applyBindings(new ViewModel());

您还可以将值存储到 this 的属性中，而不是存储到 jQuery 数据中。

这是 jsfiddle 中的示例 http://jsfiddle.net/Z8yq5/

【讨论】：