Sprawdzanie poprawności Knockoutjs dla przykładów areSame lub mustMatch

Question

Próbuję użyć dodatku sprawdzania poprawności Knockoutjs z GitHub. Większość z nich wydaje się działać dobrze, ale kiedy próbuję użyć rozszerzonej walidacji mustEqual (password/confirm password), nie wydaje się, aby cokolwiek zrobić. czego mi brakuje?

Bardzo chciałbym nauczyć się tej techniki przedłużania do wykorzystania w przyszłości.

(również ta cała HTML i JavaScript są ładowane do strony poprzez AJAX rozmowy. Jeśli nie ma nic wspólnego z nim.)

Moje javascript

function UserAccount(data) { 
     var self = this; 
     self.Password = ko.observable(data.Password).extend({ required: true, minlength: 6, message: "Password is required", maxLength: 12 }); 

     self.Firstname = ko.observable(data.Firstname).extend({ required: true, minlength: 6, message: "Firstname is required", maxLength: 40 }); 
     self.Lastname = ko.observable(data.Lastname).extend({ required: true, minlength: 6, message: "Lastname is required", maxLength: 40 }); 
     self.Email = ko.observable(data.Email).extend({ required: true, minlength: 6, message: "Email is required", email: true, maxLength: 90 }); 
     self.ConfirmPassword = ko.observable().extend({ mustEqual: self.Password()}); 
     ...........................Other Code............ 
     } 

    ko.validation.rules['mustEqual'] = { 
     validator: function (val, otherVal) { 
      alert("Hello"); 
      return val === otherVal; 
     }, 
     message: 'The field must equal {0}' 
    }; 
    $(document).ready(function() { 


     ko.applyBindings(new UserAccount(initdata), $("#UserAccount").get(0)); 
     ko.validation.registerExtenders(); 

    }); 

Answer 1

Twój kod niestandardowy walidator jest OK. Ale nie wywołujecie poprawnie metody ko.validation.registerExtenders();.

Chociaż nie jest to jednoznacznie określone, ale musisz zadzwonić pod numer ko.validation.registerExtenders();przed dzwonisz pod numer ko.applyBindings.

Tak, aby naprawić swój kod wystarczy napisać:

$(document).ready(function() { 
    ko.validation.registerExtenders(); 
    ko.applyBindings(new UserAccount(initdata), $("#UserAccount").get(0)); 
}); 

Ale będziesz musiał stawić czoła kolejnym problemem: the mustEqual walidator jest porównanie z wartościami statycznymi, więc nie będzie działać, jeśli chcesz porównać dwa właściwości takie jak hasło z potwierdzeniem hasła.

Co potrzebne jest coś takiego jak user contributed "Are Same" validator:

ko.validation.rules['areSame'] = { 
    getValue: function (o) { 
     return (typeof o === 'function' ? o() : o); 
    }, 
    validator: function (val, otherField) { 
     return val === this.getValue(otherField); 
    }, 
    message: 'The fields must have the same value' 
}; 

Co można użyć jak:

self.Password = ko.observable(data.Password).extend({ 
    required: true, 
    minlength: 6, 
    message: "Password is required", 
    maxLength: 12 
}); 
self.ConfirmPassword = ko.observable().extend({ 
    areSame: self.Password 
}); 

Demo JSFiddle.