넉 아웃 유효성 확인 : 동적 제약

Question

나는 Durandal을 사용 중이며, 이는 Knockout을 활용합니다.

내가 변경 검증 할 수 있도록하려면이

Fiddle

바이올린 내 "작업"솔루션보다 약간 다른 행동을 할 것으로 보인다

동적 길이,하지만 아직하고 있지 내가 원하는/기대하고있는 것.

뷰 모델 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의 최대 길이를 정규식 바로 다음에 설정하고 관찰 가능을 사용하도록 최소 및 최대 길이를 설정하는 다른 경로를 시도했습니다. 성공.

I는 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

너무 가까이 :-) unwrap 값이 아닌 observable 자체를 제공해야합니다. 따라서 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'; 
      } 
     } 
    }); 

고려한다.