Knockout.js驗證

Question

我是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'">

Answer 1

在官方的Knockout文檔站點上查看“可寫的可計算觀察值” 示例3和示例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結合使用，以實現一致的跨瀏覽器處理。

Answer 2

考慮使用Knockout事件並捕獲其change事件，然后使用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中：viewModel內部

//更改日期時將調用此函數

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 liberary