如何在Knockout驗證中使用正反饋驗證

Question

我需要關於Knockout驗證的一些正面反饋。定期敲除驗證使用data-bind =「validationElement」。有點像這樣：

<div data-bind="validationElement: path.to.ko.property"> 
    <input type="text" data-bind="value: path.to.ko.property /> 
</div> 

和驗證錯誤可以證明這樣，2種不同的方法（參見：https://github.com/Knockout-Contrib/Knockout-Validation/wiki/Validation-Bindings）：

<div data-bind="validationElement: path.to.ko.property"> 
    some html/text which will be shown when there is an error. 
</div> 
<div data-bind="validationMessage: path.to.ko.property"> 
    some html/text which will be shown when there is an error. 
</div> 

我想是有積極的反饋也是如此。所以當字段被正確填充（驗證通過）時，我想向用戶顯示正面的反饋。

Answer 1

搜索後，我發現一些代碼片段，但沒有任何實際工作。所以在我之後，我找到了自己的解決方案。我在這裏分享它，所以其他人可能遇到同樣的問題，並希望使用相同的方法。

你基本上只需要一個額外的綁定處理程序來完成這項工作。您可以使用一個新的bindingHandler，但我所做的就是重寫並擴展現有的一個：

/** 
* Custom binding for adding an extra success class to the element when success. 
* OVERRIDE NOTE!! use the original for validation first. 
* @type {{update: ko.bindingHandlers.validationElement.update}} 
*/ 
var originalBindingHandlerValidationElement = ko.bindingHandlers.validationElement; 

ko.bindingHandlers.validationElement = { 
    update: function (element, valueAccessor, allBindingsAccessor) { 
     // call original method. 
     originalBindingHandlerValidationElement.update(element, valueAccessor, allBindingsAccessor); 

     var obsv = valueAccessor(), 
      isModified = false, 
      isValid = false, 
      isValidating = false; 

     if (obsv === null || typeof obsv === 'undefined') { 
      throw new Error('Cannot bind validationElement to undefined value. data-bind expression: ' + 
       element.getAttribute('data-bind')); 
     } 

     isValid = obsv.isValid && obsv.isValid(); 
     isModified = obsv.isModified && obsv.isModified(); 
     isValidating = obsv.isValidating && obsv.isValidating(); 

     // create an evaluator function that will return something like: 
     // css: { validationElement: true } 
     var cssSettingsAccessor = function() { 
      var css = {}; 

      css["has-success"] = isValid && (isModified && (obsv()!==null)); 
      css["has-progress"] = isModified && isValidating; 

      return css; 
     }; 

     //add or remove class on the element; 
     ko.bindingHandlers.css.update(element, cssSettingsAccessor, allBindingsAccessor); 
    } 
}; 

我使用原來的bindingHandler要處理哪些已經與基因敲除驗證插件工作的錯誤狀態。但是，在成功或正在處理的元素中添加了「成功」和「進步」類。我用的是什麼基因敲除驗證INIT是：

ko.validation.init({ 
     insertMessages: false, 
     errorClass: 'has-error', 
     errorsAsTitle: false, 
     grouping: { 
      observable: true, 
      deep: true 
     } 
    }, true); 

這導致3類將被放置：有-成功，有錯誤，有正在進行中。

當多個字段一起有效或無效時，下一步是對我進行某種彙總反饋。於是我又bindingHandler：

/** 
* Custom binding for multiple checked properties to validate 
* Usage example: validationElements:[path.to.prop1,path.to.prop2] 
* @type {{update: ko.bindingHandlers.validationElements.update}} 
*/ 
ko.bindingHandlers.validationElements = { 
    update: function (element, valueAccessor, allBindingsAccessor,vm) { 
     var properties = valueAccessor(); 
     var allValid = true, allValidating = true, allModified = true, allNull = true; 

     for(var i=0;i<properties.length;i++) { 
      var propModel = properties[i]; 

      var isModified = propModel.isModified && propModel.isModified(), 
       isValid = propModel.isValid && propModel.isValid(), 
       isValidating = propModel.isValidating && propModel.isValidating(); 

      allValid = allValid && isValid; 
      allModified = allModified && isModified; 
      allValidating = allValidating && isValidating; 
      allNull = allNull && (propModel()!==null); 
     } 

     // create an evaluator function that will return something like: 
     // css: { validationElement: true } 
     var cssSettingsAccessor = function() { 
      var css = {}; 

      css["has-success"] = allValid; 
      css["has-progress"] = allModified && allValidating; 
      css["has-error"] = !allValid && allModified; 

      return css; 
     }; 

     //add or remove class on the element; 
     ko.bindingHandlers.css.update(element, cssSettingsAccessor, allBindingsAccessor); 
    } 
}; 

這驗證處理程序可以像這樣使用：

<div data-bind="validationElement: path.to.ko.property1"> 
    <input type="text" data-bind="value: path.to.ko.property1" /> 
</div> 
<div data-bind="validationElement: path.to.ko.property2"> 
    <input type="text" data-bind="value: path.to.ko.property2" /> 
</div> 
<div data-bind="validationElements:[path.to.ko.property1, path.to.ko.property2]"> 
    <i class="fa fa-check is-success"></i> 
    <i class="fa fa-exclamation-circle is-error"></i> 
    <i class="fa fa-spinner fa-pulse is-progress"></i> 
</div> 

後/驗證過程中validationElements格會成爲像下列操作之一： 或 或

用這種方法你都能夠給用戶的確認正反饋。用下面的CSS片段，你可以釘它。

.is-success, 
.is-error, 
.is-progress { 
    display: none; 
} 
.has-success .is-success { 
    color: green; 
    display: block; 
} 
.has-error .is-error { 
    color: red; 
    display: block; 
} 
.has-progress .is-progress { 
    color: yellow; 
    display: block; 
} 

我希望這會幫助其他人，因爲我花了幾個小時才能找到它。我已經爲此設置了一個簡單的工作示例：http://codepen.io/anon/pen/ZOBbJG