與自定義擴展程序和驗證的敲除綁定

Question

我正在使用KnockoutJS 3.2.0以及最新的Knockout-Validation和映射。 Controller向我發送一個來自Model的複雜JSON對象。 許多人認爲工作很好。現在我得到了第一個更大的問題，直到現在我無法解決自己。 我得到了擴展器，它將我的價值轉換爲歐元字符串。和我自己的（或驗證'最大'）擴展器來檢查值。 任何人都可以告訴我我犯了什麼樣的錯誤嗎？ 我在HTML中直接使用我的擴展器。我不會手動設置擴展程序。

我試着爲你製作一個非常簡單的例子。 類型150>顯示錯誤>類型100>應該隱藏錯誤。

我更新了代碼。現在錯誤通知工作正常。但該模型仍然有效。

ko.validation.rules['maxval'] = { 
 
    validator: function (val, otherVal) { 
 
     var nbr ; 
 
      if(ko.validation.utils.isNumber(val)) 
 
      { 
 
       nbr = val;    
 
      } 
 
      else 
 
      { 
 
       nbr=val.split('€')[0] 
 
      } 
 
     return nbr <= otherVal; 
 
    }, 
 
    message: 'Number should greater than or equal to {0} €' 
 
}; 
 
ko.extenders.euro = function (target, precision) {     
 
       var result = ko.dependentObservable({ 
 
        read: function() { 
 
         //sample      
 
         if(target().toString().indexOf('€') != -1) { 
 
          return target() ;} 
 
         else{ 
 
          return target() +" €";} 
 
        }, 
 
        write: target 
 
       }).extend({ 
 
        notify: 'always' 
 
       }); 
 
       result.raw = target; 
 
       return result; 
 
      }; 
 
ko.validation.registerExtenders(); 
 
var data = { num : 100}; 
 
var viewModel = ko.validatedObservable(ko.mapping.fromJS(data)); 
 
ko.applyBindings(viewModel);

label { display: block; margin-top: 5px }

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script> 
 
<script src="https://raw.githubusercontent.com/SteveSanderson/knockout.mapping/master/build/output/knockout.mapping-latest.js"></script> 
 
<script src="https://raw.githubusercontent.com/Knockout-Contrib/Knockout-Validation/master/dist/knockout.validation.min.js"></script> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 

 
<fieldset> 
 
    <label>work: <input data-bind="value: num.extend({ euro : 2,maxval : 130})" /></label> 
 
    <label>work: <input data-bind="value: num.extend({ maxval : 130})" /></label> 
 
</fieldset> 
 

 
<div> 
 
    <button type="button" data-bind='enable: isValid()'>Submit</button> 
 
    <label>button still valid</label> 
 
</div>

感謝

Answer 1

那麼你應該是onLoad的調用您的文本框的值不是數字（100€）這裏要注意，你正試圖以比較使用max:130一些讓你總是假。

使用自定義的驗證，我們可以處理這個問題的有效

自定義驗證規則：

ko.validation.rules['maxval'] = { 
    validator: function (val, otherVal) { 
     var nbr ; 
     if(val) { 
     nbr=val.split('€')[0] 
     } 
     return nbr <= otherVal; 
    }, 
    message: 'Number should greater than or equal to {0} €' 
}; 

注：值 '130' 是第二ARG（ 'otherVal'）是傳遞給驗證人

註冊規則創建人：

ko.validation.registerExtenders(); 

視圖模型：

ko.extenders.euro = function (target, precision) {     
       var result = ko.dependentObservable({ 
        read: function() { 
         //sample      
         if(target().toString().indexOf('€') != -1) { 
          return target() ;} 
         else{ 
          return target() +" €";} 
        }, 
        write: target 
       }).extend({ 
        notify: 'always' 
       }); 
       result.raw = target; 
       return result; 
      }; 

var data = { num : 100}; 
var viewModel = ko.validatedObservable(ko.mapping.fromJS(data)); 
ko.applyBindings(viewModel); 

工作撥弄here

有關KO驗證文件refer here