淘汰赛验证：动态约束

Posted 2021-05-05

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

[尝试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)
          }
    });

答案

你是如此接近:-)你必须提供观察本身，而不是未解开的价值。所以只需从()中删除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参数设置正则表达式/字符串。

或者你当然可以定义计算的observable（这里可以将countryCode()称为函数，因为这是计算机的工作方式）

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

另一答案

这是适合我的解决方案：

我使用了custom validation功能，更具体地说是single use custom validation，因为这不会在其他地方重复使用。

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

另一答案

考虑一下

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

其中SouthAfricanIDNumber是使用正则表达式的自定义验证。