7

GitHub の Knockoutjs Validation アドオンを使用しようとしています。ほとんどは問題なく動作しているようですが、拡張検証 mustEqual(password/confirm password) を使用しようとすると、何もしないようです。私は何が欠けていますか？

将来の使用のために、この拡張技術を学びたいと思います。

(また、この全体の html と javascript は、AJAX 呼び出しを介してページにロードされます。それが関係している場合。)

私の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();

    });
4

1 に答える 1

10

カスタム バリデータ コードは問題ありません。しかし、メソッドを正しく呼び出していませんko.validation.registerExtenders();。

明示的には記載されていませんが、電話ko.validation.registerExtenders(); する前に電話する必要がありますko.applyBindings。

したがって、コードを修正するには、次のように書くだけです。

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

しかし、別の問題に直面します:mustEqualバリデーターは静的な値と比較するためのものであるため、パスワードと確認パスワードのような 2 つのプロパティを比較したい場合には機能しません。

必要なのは、ユーザーが提供した "Are Same" バリデータのようなものです:

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

次のように使用できます。

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

JSFiddleのデモ。

于 2013-09-23T19:06:50.127 に答える