Regex 敲除不发送更新值

我有一个淘汰页面，在那里我用正则表达式格式化输入。它将输入字段设置为MM/dd/yyyy格式。因此，如果用户输入“1111”，则会将输入vbox更改为显示“01/01/2011”，或将“01111”更改为显示“01/01/2011”

我面临的问题是，我的observable只返回用户输入的击键，而不是完全格式化的项。例如，若用户输入“1111”，我将返回“1111”，而不是“01/01/2011”

这是Html片段

<input id="inpEventDt" placeholder="MM/DD/YYYY" class="input-small" data-date-blur="true" data-regex="^((\d{0,2})|(\d{1,2}/?\d{0,2})|(\d{1,2}/?\d{1,2}/?\d{0,4}))$"
                       type="text" data-bind="textInput: dateofevent"/>

---

试图找出我做错了什么

我不会在用户打字时尝试格式化文本输入，因为这样会造成难以理解的用户界面和非直观的打字体验

此外，它更复杂，因为在键入时，输入可能无效

尝试在某些事件（例如模糊）上格式化输入，同时在击键时验证输入：

var viewModel=function（）{
var self=这个；
var regex=/^（\d{1,2}）\/（\d{1,2}）\/（\d{4}）$/；
this.isValid=ko.可观察（假）；
this.date=ko.可观察（“”）；
this.format=函数（）{
self.validate（self.date（））；
//托多：还有别的吗
}
this.validate=函数（newVal）{
var matches=newVal.match（regex）；
如果（！matches | | matches.length！=4）{
self.isValid（false）；
}否则{
self.isValid（true）；
}
};
this.date.subscribe（函数（newVal）{
自我验证（newVal）；
});
this.style=ko.computed（函数（）{
返回self.isValid（）？“valid”：“invalid”；
}，这个）；
};
var vm=new viewModel（）；
ko.应用绑定（vm）
。无效{
边框：1px纯红；
}
.有效{
边框：1px纯绿色；
}

好的
您应该尝试使用为此计算的读/写操作。查看淘汰文档中的计算可观测值

此外，这里还有一个使用moment.js帮助设置日期格式的例子

var ViewModel = function (eventdt ) {
var self = this;
self.dateofevent = ko.observable(eventdt);

self.formattedDate = ko.pureComputed({
        read: function () {
            return moment(self.dateofevent()).format("MM/DD/YYYY");
        },
        write: function (value) {
            self.dateofevent(moment(value).toDate()); // Write to underlying storage
        }
    });

}

viewModel = new ViewModel(new Date("03/25/2015"));

ko.applyBindings(viewModel);

您的文本输入绑定到
dateofevent
变量。因此，无论何时使用除knockout之外的其他方法更改输入值，都需要使用新值更新knockout变量。我建议使用knockout extend或subscribe，然后在subscribe函数中进行regex验证。您有没有示例？这里只是一个示例，以防止用户输入任何特殊字符。您需要在validate函数中进行验证，然后再次将其替换为target。我非常喜欢您的建议。在您的实现中，我将失去的一点是用户友好性。目前，我的用户可以键入“1111”（仅4位），它将在UI上转换为“01/01/2011”。但是有了@Tim Yonker，我仍然拥有它。这绝对是一个很好的解决方案。我不知道如何将数字字符串格式化为日期。例如，您希望从字符串122011中得到什么？2011年1月2日（2011年1月2日），或2011年12月1日（2011年12月1日）或2011年12月2日（2011年12月2日）？这就是为什么我没有把format函数放在你自己的位置上，这就是我的确切回答。但用户真的很喜欢这样的事实，他们只需输入1111，它显示2011年1月1日，这是正则表达式和数据日期模糊让我们这样做。之后，用户可以将字符串更新到正确的日期。但正如我所说，我真的很喜欢你的解决方案的优雅。我已经将你的方案标记为解决方案。因为它对我的具体问题更有用。我没有面膜的解决方案，但现在能够解决这个问题。非常感谢。我喜欢你的建议，因为我仍然具有用户友好性。但另一方面，在moment.js上添加依赖项。我使用moment是为了提供示例fiddle的简单性。您可以使用自己的日期解析代码对其进行调整。关键是，您可以使用读/写computed observable在文本输入和模型之间来回处理格式化数据类型。
var ViewModel = function (eventdt ) {
var self = this;
self.dateofevent = ko.observable(eventdt);

self.formattedDate = ko.pureComputed({
        read: function () {
            return moment(self.dateofevent()).format("MM/DD/YYYY");
        },
        write: function (value) {
            self.dateofevent(moment(value).toDate()); // Write to underlying storage
        }
    });

}

viewModel = new ViewModel(new Date("03/25/2015"));

ko.applyBindings(viewModel);