ko.observable() 修剪结束空格答案

【问题标题】：ko.observable() trim ending whitespaceko.observable() 修剪结束空格
【发布时间】：2020-04-25 07:34:22
【问题描述】：

我有一个名为 hours 的 HTML 文本输入，它通过敲除扩展程序验证为数字。如果输入小时数的用户在他们输入的数字之后有任何空格，我想简单地修剪一下，而不会收到他们输入的小时数不是数字的通知。例如，如果他们输入“2.5”，这应该是正确的，因为我希望自动修剪多余的空格。我怎么能用我下面的东西做到这一点？谢谢你。

hours: ko.observable().extend({ number: true, required: true })

【问题讨论】：

为什么不直接输入数字类型 --> input type="number"。那么默认情况下会忽略空格吗？
@CDA 程序员，我的回答对您解决问题有帮助吗？如果是，请将其标记为已接受。如果没有，请告诉我，我会尽力提供进一步帮助。

标签： javascript knockout.js knockout-validation extender

【解决方案1】：

您可以向可观察对象添加修剪功能，例如向ko.subscribable.fn 添加自定义函数，如另一个SO post 中所述：

ko.subscribable.fn.trimmed = function() {
    return ko.computed({
       read: function() {
           return this();
       },
       write: function(value) {
           this(value.trim());
           this.valueHasMutated();
       },
       owner: this
   }).extend({ notify: 'always' });
};
var vm = function () {
  this.num = ko.observable().trimmed().extend({ number: true });
  this.num(' 2 ');
}
ko.applyBindings(new vm());

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout-validation/2.0.3/knockout.validation.min.js"></script>
<input type="text" data-bind="value: num" />

附：不要试图在 Knockout 验证器插件 number 规则中添加 trim() 调用：

// this is the original 'number' rule implemetation, with a 'trim()' call added to it
ko.validation.rules['number'] = {
   validator: function (value, validate) {
        if (!validate) { return true; }
        return ko.validation.utils.isEmptyVal(value) || 
               (validate && /^-?(?:\d+|\d{1,3}(?:,\d{3})+)?(?:\.\d+)?$/.test(value.trim()));
    },
    message: 'Please enter a number.'
};

...因为您不希望在验证期间进行修剪，但要更早，即：在写入期间。

【讨论】：