淘汰赛验证:动态约束

时间:2013-06-26 07:14:01

标签: knockout.js knockout-2.0 durandal knockout-validation

我正在使用Durandal,而Durandal又利用了Knockout。

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

enter image description here

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

似乎正在发生的事情是,当我开始输入时,我得到了最大和最大值min验证13,但如果我继续输入验证更改为15.我尝试了另一条路线,设置min&初始可观察的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)
          }
    });

3 个答案:

答案 0 :(得分:6)

以下是适合我的解决方案:

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

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

答案 1 :(得分:4)

考虑这个

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是使用正则表达式的自定义验证。

答案 2 :(得分:4)

你太近了:-) 您必须提供observable本身,而不是unwrapped值。所以只需从()中删除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 },因为它赢了&#39;工作。如果您没有留言,则必须直接为pattern参数设置正则表达式/字符串。

当然你可以只定义计算出的observable(这里可以将countryCode()作为一个函数调用,因为这是计算机的工作原理)

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