Knockout.js 验证答案

【问题标题】：Knockout.js validationKnockout.js 验证
【发布时间】：2015-06-16 00:53:57
【问题描述】：

我是 Knockout.js 技术的新手，我在 Google 上搜索了许多网站来解决我找不到更好选择的情况。如何使用 Knockout.js 验证日期？在我的情况下，如果用户以错误的格式输入日期，例如，如果有效的日期格式是 dd-M-yyyy 但用户输入的是 M-dd-yyyy，它应该自动将其转换为有效的日期格式。

我的示例代码是这样的，

self.dateOfBirth = ko.observable(0).extend({
            required: { message: 'Date of Birth is required', params: true },
            date: { format: 'dd-M-YYYY' ,
                message: 'Not a valid date format',params:true
           }

我的 HTML 设计是这样的，

    <input class="form-control" id="dateOfBirth" autocomplete="off" placeholder="Date of Birth" type="text" data-bind="value: dateOfBirth, format:'dd-M-YYYY', valueUpdate: 'afterkeydown'">

【问题讨论】：

如果您允许用户输入日期，他可以输入“9/11/2014”。您怎么知道他的意思是 2014 年 9 月 11 日还是 2014 年 11 月 9 日？
@SBirthare：是的，我考虑过这种情况..我可以保留占位符来提及格式..无论如何我都需要更改..如果是 2014 年 9 月 11 日，系统应该仅采用这种格式 dd-M-yyyy
我仍然不确定您将如何确定何时更改，因为我给出的日期完全有效。你的用户会喜欢吗？把这部分留给你，我只是要提出另一个建议。我没有广泛使用 KnockoutJS，所以它只是一个建议。你为什么不把 Knockout 排除在外，只使用普通的 JS/JQuery 来实现它？
如果是javascript，您将如何实现这一点。就我而言，我不需要抛出错误。我的主要目标是专注于格式的转换..
在 JS 中编写一个适当的事件处理程序，在那里你可以获取当前值，应用一个漂亮的正则表达式，看看它是否符合有效的格式标准。如果您想执行转换（我可以想象有效的转换是如果用户输入“9/11/2014”，您可以将值更新为“9-Nov-2014”）并再次更新文本框。全部使用java脚本。

标签： javascript asp.net-mvc html knockout.js

【解决方案1】：

查看官方 Knockout 文档网站上的“可写计算 observables”example 3 和 example 4。

例子：

this.formattedDate = ko.pureComputed({
    read: function () {
        return this.date();
    },
    write: function (value) {
        // convert date to dd-M-YYYY, then write the 
        // raw data back to the underlying "date" observable
        value = convertDate(value); // add your own conversion routine
        this.date(value); // write to underlying storage
    },
    owner: this
});

还可以考虑使用textInput 绑定，而不是value 与valueUpdate 结合使用，以实现一致的跨浏览器处理。

【讨论】：

【解决方案2】：

考虑使用 Knockout 事件并捕获其更改事件，然后使用 moment.js 库将其转换为您喜欢的任何日期格式。

在 HTML 中：

<input class="form-control" id="dateOfBirth" autocomplete="off" placeholder="Date of Birth" type="text" data-bind="value: dateOfBirth, event: { change: dataChanged}, valueUpdate: 'afterkeydown'">

在 JavaScript 中：在您的视图模型中

//更改日期时调用该函数

self.dataChanged = function(){ //using moment .js here change the format to dd-M-YYYY as desired var validFormat = moment(self.dateOfBirth()).format('dd-M-yyyy'); self.dateOfBirth(validFormat); }

更多详情请查看 moment.js 库

【讨论】：