ko.observable() 修剪结束空格

Posted 2023-03-27

【中文标题】ko.observable() 修剪结束空格

【英文标题】：ko.observable() trim ending whitespace

【发布时间】：2020-04-25 07:34:22

【问题描述】：

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

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

【问题讨论】：

为什么不直接输入数字类型 --> input type="number"。那么默认情况下会忽略空格吗？

@CDA 程序员，我的回答对您解决问题有帮助吗？如果是，请将其标记为已接受。如果没有，请告诉我，我会尽力提供进一步帮助。

【参考方案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+|\d1,3(?:,\d3)+)?(?:\.\d+)?$/.test(value.trim()));
    ,
    message: 'Please enter a number.'
;

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