Пользовательская проверка выбивки: как проверить, равно ли наблюдаемое определенному значению?

Question

Я новичок в Knockout.js, и я хотел бы проверить, имеет ли поле моей формы определенное значение.На самом деле, я только проверяю, требуется ли это или нет.Что мне делать?

Вот что у меня на html-странице:

 <div data-bind="visible: !Vm.isValid()" class="text-danger">Fill each field to send data, otherwise show this message</div>

 <input data-bind="enable: Vm.isValid()" type="button" value="Send data!" />

Вот так выглядит мой файл vm.js:

 window.Vm = ko.validatedObservable({
     name : ko.observable().extend({ required: true })
 });            

Я бысделать что-то вроде этого, но я не знаю, как это сделать:

 var found = "found";
 window.Vm = ko.validatedObservable({
    name: ko.observable().extend({
       required: true,
       function: {
          if (this.val() == found)
             return true; // invalid value, can't submit my form
       }
    })
 });

Answer 1

Я бы на самом деле не рекомендовал использовать библиотеку Knockout Validation, так как она не поддерживалась годами.Это устаревшее решение проблемы, которой больше не существует.В 2019 году вы можете просто использовать проверку формы, которая является родной для каждого современного браузера.Просто добавьте атрибут required в поля формы, и форма не будет отправлена, если не все необходимые поля были заполнены.

Если вы хотите, чтобы он был немного более динамичным, вы можете сделать что-то вроде этого:

function ViewModel() {
    var vm = this;

    vm.name = ko.observable();
    vm.required = ['name', 'email'];

    vm.isRequired = isRequired;

    function isRequired(field) {
        return vm.required.indexOf(field) > -1;
    }
}

И используйте привязку attr, чтобы установить атрибут required на основе массива необходимых элементов в вашей модели представления.

<input type="text" data-bind="textInput: name, attr: { required: isRequired('name') }">

Answer 2

Я взял данные как ["A", "B"], и поиск по тем же данным.

ko.extenders.required = function(target, overrideMessage) {
    //add some sub-observables to our observable
    target.hasError = ko.observable();
    target.validationMessage = ko.observable();
    target.data = ko.observableArray(["A","B"]);
 		target.found = ko.observable();
    target.foundMessage = ko.observable();
    //define a function to do validation
    function validate(newValue) {
       target.hasError(newValue ? false : true);
       target.validationMessage(newValue ? "" : overrideMessage || "This field is required");
       target.found(target.data().find(function(element){ return newValue==element;}));
       target.found()?target.foundMessage("element has found"):target.foundMessage("element has not found");
    }
 
    //initial validation
    validate(target());
 
    //validate whenever the value changes
    target.subscribe(validate);
 
    //return the original observable
    return target;
};
 
function AppViewModel(first) {
    this.firstName = ko.observable(first).extend({ required: "" });
}
 
ko.applyBindings(new AppViewModel("C"));

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/2.3.0/knockout-min.js"></script>
<p data-bind="css: { error: firstName.hasError }">
    <input data-bind='value: firstName, valueUpdate: "afterkeydown"' />
    <span data-bind='visible: firstName.hasError, text: firstName.validationMessage'> </span>
    <span data-bind='visible: (!firstName.hasError()), text: firstName.foundMessage'> </span>
</p>

Answer 3

Вы можете использовать пользовательский validator как этот ( Документация ):

var found = "found";

var Vm = ko.validatedObservable({
  name: ko.observable().extend({
    required: {
      message: "This is a required field",
    },
    validation: {
      validator: (val, paramValue) => {
        // "val" has the value entered in the field
        // "paramValue" has the value set in "params"
        return val === paramValue
      },
      message: "The value is not " + found,
      params: found
    }
  })
});

ko.applyBindings(Vm)

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout-validation/2.0.3/knockout.validation.min.js"></script>

<input type="text" data-bind="value: name" />