Xác nhận loại bỏ: Hạn chế động

Question

Tôi đang sử dụng Durandal, do đó tận dụng hết Knockout.

Tôi muốn để có thể Thay đổi xác nhận độ dài động

Fiddle

Các fiddle dường như được cư xử hơi khác so với tôi giải pháp "làm việc", nhưng nó vẫn không làm những gì tôi muốn/mong đợi nó.

ViewModel JS:

[Cố gắng 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; 
}); 

gì dường như xảy ra là khi tôi bắt đầu gõ tôi nhận được tối đa & xác phút 13, nhưng nếu tôi tiếp tục gõ các thay đổi xác nhận 15. Tôi đã thử một tuyến đường khác, thiết lập chiều dài tối thiểu & tối đa trong vòng mở rộng EG có thể quan sát được, ngay sau regex, và sau đó thiết lập độ dài tối thiểu và tối đa để sử dụng một quan sát, không sự thành công.

[Cố gắng 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

Bạn đã rất gần :-) Bạn phải cung cấp chính bản thân quan sát được chứ không phải giá trị chưa được mở. Vì vậy, chỉ cần xóa () từ maxLength() - thư viện xác nhận sẽ tự động mở nó cho bạn.

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

Đây là một ví dụ khác có mẫu regex động.

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 
     } 
    }); 

hoặc (nếu bạn không muốn nhận thư).

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

quan trọng: Nếu bạn không muốn có một thông báo tùy chỉnh không chỉ loại bỏ các tham số message và rời pattern = { params: this.zipPostalPattern } bởi vì nó sẽ không làm việc. Nếu bạn không có thông báo, bạn phải đặt trực tiếp Regex/string cho tham số pattern.

Hoặc tất nhiên bạn chỉ có thể xác định các quan sát được tính tại chỗ (ở đây nó là ok để gọi countryCode() như một chức năng vì đó là cách tính của công việc)

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

Answer 2

Dưới đây là giải pháp mà làm việc cho tôi:

Tôi đã sử dụng các tính năng custom validation, cụ thể hơn là single use custom validation như thế này sẽ không được tái sử dụng ở nơi khác.

[Nỗ lực 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

xem xét việc này

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'; 
      } 
     } 
    }); 

nơi SouthAfricanIDNumber là một xác nhận tùy chỉnh mà sử dụng regex.