knockout.js - knockout 验证: Dynamic constraints

Question

我正在使用Durandal，而后者又利用了Knockout。

我希望能够动态更改验证长度

Fiddle

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，仅在正则表达式之后，然后将最小和最大长度设置为使用可观察值，但没有成功。

[尝试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参数设置正则表达式/字符串。

或者，当然，您可以就地定义计算的可观察对象(此处可以将 countryCode()调用为函数是可行的，因为这就是计算的工作原理)

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