ノックアウト検証：動的制約

Question

私はDurandalを使用しています.DurandalはKnockoutを活用しています。

私は変更の検証の長さにできるようにしたい動的

Fiddle

フィドルは、私の「作業」ソリューションよりもわずかに異なる挙動をしているようだが、そのはまだやっていません私が望んでいる/期待していること。

のViewModel JS：

[試み1]

define(function() { 

    var self = this; 

    self.userInfo = {  
     IdOrPassportNumber: ko.observable().extend({ 
      required: true, 
      pattern: { 
       message: 'A message', 
       params: /some regex/ 
      } 
     }), 
     IdType: ko.observable() 
    }, 

    self.isIdValid = ko.validatedObservable({ 
     IdOrPassportNumber: self.userInfo.IdOrPassportNumber 
    }); 

    self.userInfo.IdOrPassportNumber.subscribe(function (value) { 
      if (isIdValid.isValid()) { 
       console.log('YOLO!'); 
      } 
    }); 

    self.userInfo.IdType.subscribe(function (value) { 
     console.log(value); 
     if (value === 'Passport') { 
      self.userInfo.IdOrPassportNumber.extend({ maxLength: 15 }); 
     } else { 
      self.userInfo.IdOrPassportNumber.extend({ maxLength: 13 }); 
     } 
    });  

    var viewModel = { 
     userInfo: self.userInfo 
    }; 

    viewModel["errors"] = ko.validation.group(viewModel.userInfo); 
    viewModel["errors"].showAllMessages(); 

    return viewModel; 
}); 

何が起こっているようだが、私が入力を開始するとき、私は13の最大&分バリデーションを取得するということですが、私の場合15へのバリデーションの変更を入力し続けます。私は最初の観測可能な拡張EGのちょうど&の最大長を、正規表現の直後に設定してから、観察可能なものを使用するために最小値と最大長を設定する 成功。

私はcustom validation機能を利用した、より具体的に文句を言わない再利用することがこのよう single use custom validation：

は[試み2]ここ

self.userInfo = {  
     IdOrPassportNumber: ko.observable().extend({    
      maxLength: self.maxLength(), 
      minlength: self.maxLength() 
     }), 
     IdType: ko.observable() 
    }, 

    self.maxLength = ko.observable(); 

    self.userInfo.IdType.subscribe(function (value) { 

      if (value === 'Passport') { 
      self.maxLength(15) 
      } else { 
       self.maxLength(3) 
      } 
    }); 

Answer 1

あなたはとても近かった:-) アンラッピングされた値ではなく、オブザーバブル自体を提供する必要があります。したがって、maxLength()から()を削除するだけです。検証ライブラリは自動的にあなたのためにそれをアンラップします。

self.userInfo = {  
    IdOrPassportNumber: ko.observable().extend({    
     maxLength: self.maxLength, 
     minlength: self.maxLength 
    }), 
    IdType: ko.observable() 
}, 

ここでは、動的正規表現パターンを使用した別の例を示します。

zipPostalPattern = ko.pureComputed(() => this.countryCode() === 'US' ? '^\\d{5}(?:[-\\s]\\d{4})?$' : ''); 
    zipOrPostal: KnockoutObservable<string> = ko.observable('').extend(
    { 
     required: true, 
     pattern: { 
      message: 'This is not a valid postcode for the country', 
      params: this.zipPostalPattern 
     } 
    }); 

（メッセージを表示したくない場合）

zipPostalPattern = ko.pureComputed(function() { return this.countryCode() === 'US' ? '^\\d{5}(?:[-\\s]\\d{4})?$' : ''}); 
    zipOrPostal: KnockoutObservable<string> = ko.observable('').extend(
    { 
     required: true, 
     pattern: self.zipPostalPattern 
    }); 

重要：あなただけmessageパラメータを削除し、それが動作しませんので、pattern = { params: this.zipPostalPattern }を残していないカスタムメッセージをしたくない場合。メッセージがない場合は、patternパラメータにRegex /文字列を直接設定する必要があります。

それとももちろん、あなただけの

zipOrPostal: KnockoutObservable<string> = ko.observable('').extend(
    { 
     required: true, 
     pattern: ko.pureComputed(function() { 
        return self.countryCode() === 'US' ? '^\\d{5}(?:[-\\s]\\d{4})?$' : '' 
        }) 
    }); 

Answer 2

私のために働いたソリューションです。他の場所。

[試み3]

self.userInfo = {  
     IdOrPassportNumber: ko.observable().extend({ 
      required: true, 
      pattern: { 
       message: 'A message', 
       params: /some regex/ 
      }, 
      validation: { 
       validator: function (val) { 
        if (self.userInfo.IdType() === 'Id') { 
         return val.length === 13; 
        } else { 
         return val.length === 15; 
        } 
       }, 
       message: function() { 
        if (self.userInfo.IdType() === 'Id') { 
        return 'Required: 13 characters'; 
        } else { 
        return 'Required: 15 characters'; 
        } 
       } 
      } 
     }) 
    } 

Answer 3

はSouthAfricanIDNumberは、正規表現を使用してカスタム検証です。この

self.iDNumber = ko.observable('').extend({ 
     required: { 
      params: true, 
      message: 'ID Number is a required field.', 
      insertMessages: false 
     }, 
     SouthAfricanIDNumber: { 
      message: 'Please enter a valid South African ID number.', 
      onlyIf: function() { 
       return self.identityType() === 'SAID'; 
      } 
     } 
    }); 

を検討してください。