Knockout中的条件验证

时间:2017-02-28 14:38:18

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

我正在尝试为电话号码添加验证

我需要它,但是如果国家是美国,我只希望强制执行该模式 这就是我所拥有的,但是当我选择了加拿大或任何其他国家时它就失败了

self.phone = ko.observable().extend({
        required: {
            onlyIf: function () {
                return self.country() == "US";
            }
        },

        pattern: {
            message: 'Please enter a valid phone number in ###-###-#### format',
            params: /^(\d{3}-\d{3}-\d{4})$/
        }
    });

1 个答案:

答案 0 :(得分:3)

很简单。只需将相同的onlyIf条件添加到pattern验证程序

即可

function ViewModel() {
  var self = this;
  self.country = ko.observable();
  self.phone = ko.observable().extend({
    required: true,

    pattern: {
      message: 'Please enter a valid phone number in ###-###-#### format',
      params: /^(\d{3}-\d{3}-\d{4})$/,
      onlyIf: function() {
        return self.country() == "US";
      }
    }
  });
  
  self.errors = ko.validation.group(self);
  
  self.isValid = function() { self.errors.showAllMessages() }
  self.clear = function() { self.errors.showAllMessages(false) }
}

ko.applyBindings(new ViewModel());
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout-validation/2.0.3/knockout.validation.min.js"></script>
Country <input data-bind="textInput: country"><br><br>
Phone <input data-bind="textInput: phone"><br><br>
<button data-bind="click: isValid">Show Errors</button>
<button data-bind="click: clear">Clear</button>