时间戳

首页 > 解决方案 > ko.observable() 修剪结束空格

javascript - ko.observable() 修剪结束空格

问题描述

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

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

标签： javascriptknockout.jsknockout-validationextender

解决方案

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

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" />

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

// 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.'
};

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

推荐阅读