Knockout驗證：如何保持無效輸入視圖模型

我有頁面，我的Knockout視圖模型根據用戶輸入的數值字段執行摘要計算。我有適當的數字驗證規則。Knockout驗證：如何保持無效輸入視圖模型

但是，如果用戶輸入非數字值，則模型必須接受該值才能進行驗證以完成其工作。因此，非數字值會流入彙總計算中，導致不理想的結果。

我想要的數字驗證規則爲阻止非數字數據進入我的viewmodel。有什麼辦法可以實現這種行爲嗎？

我意識到我可以使用ko擴展器或輸入掩碼來拒絕非數字輸入，但我寧願通知用戶他們的錯誤並自行修復它，而不是簡單地在輸入中恢復用戶的輸入領域。

2016-02-14 Brad Stiff

我使用的典型解決方案是將待創建的項目及其值存儲在根視圖模型的一個獨立部分中，並且只有在（a）驗證通過時將其推送到列表中，並且（b）用戶指示系統這樣做。例如：

function Item(name, nr){ 
 
    this.name = ko.observable(name || ""); 
 
    this.number = ko.observable(nr || 0); 
 
} 
 

 
function Root(initialItems) { 
 
    var self = this; 
 
    
 
    self.items = ko.observableArray(initialItems); 
 
    
 
    self.total = ko.computed(function() { 
 
    return self.items().reduce(function(a, b) { 
 
     return a + parseInt(b.number(), 10); 
 
    }, 0); 
 
    }); 
 
    
 
    self.newItem = ko.observable(new Item()); 
 
    
 
    self.addItem = function() { 
 
    // Stubbing actual validation: 
 
    if (!self.newItem().name()) { alert('name required!'); return; } 
 
    if (self.newItem().number() <= 0) { alert('positive nr required!'); return; } 
 
    
 
    // Actual work: 
 
    self.items.push(self.newItem()); 
 
    self.newItem(new Item()); 
 
    } 
 
} 
 

 
ko.applyBindings(new Root([new Item("Apples", 3), new Item("Oranges", 5)]));

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script> 
 

 
Total number: <strong data-bind="text: total"></strong> 
 
<hr> 
 
Items: 
 
<ul data-bind="foreach: items"> 
 
    <li> 
 
    <span data-bind="text: name"></span> 
 
    <span data-bind="text: number"></span> 
 
    </li> 
 
</ul> 
 
<hr> 
 
<div data-bind="with: newItem"> 
 
    New Item:<br> 
 
    <input placeholder="name" data-bind="textInput: name"> 
 
    <input placeholder="name" data-bind="textInput: number" type="number"> 
 
    <br><button data-bind="click: $root.addItem">Add</button> 
 
</div>

來源

2016-02-14 21:59:36 Jeroen

Knockout驗證：如何保持無效輸入視圖模型

回答

相關問題