web-dev-qa-db-ja.com

ノックアウト検証

Asp.net mvc3プロジェクトがあり、ノックアウトバインディングを使用してテーブルを一括編集します。データを保存しながら、必要な検証や番号検証などの検証を行いたい。ノックアウト検証を行う簡単な方法はありますか。 PS：フォームを使用していません。

knockout.jsvalidationknockout-validation
45
Kurkula

Knockout-Validation をご覧ください。これは knockoutドキュメンテーション に記載されているものをきれいにセットアップして使用します。下：実例1：入力を強制的に数値にする

Fiddleでライブ表示

[〜＃〜] update [〜＃〜]：フィドルは、最新のKO 2.0.3およびko.validation 1.0.2を使用するように更新されました。クラウドフェアCDN URLを使用する

Ko.validationをセットアップするには：

ko.validation.rules.pattern.message = 'Invalid.';

ko.validation.configure({
    registerExtenders: true,
    messagesOnModified: true,
    insertMessages: true,
    parseInputAttributes: true,
    messageTemplate: null
});

検証ルールを設定するには、エクステンダーを使用します。例えば：

var viewModel = {
    firstName: ko.observable().extend({ minLength: 2, maxLength: 10 }),
    lastName: ko.observable().extend({ required: true }),
    emailAddress: ko.observable().extend({  // custom message
        required: { message: 'Please supply your email address.' }
    })
};
83
Cohen

KnockoutValidationライブラリを使用したくない場合は、独自のライブラリを作成できます。必須フィールドの例を次に示します。

すべてのKO拡張またはエクステンダーを含むjavascriptクラスを追加し、以下を追加します。

ko.extenders.required = function (target, overrideMessage) {
    //add some sub-observables to our observable
    target.hasError = ko.observable();
    target.validationMessage = ko.observable();

    //define a function to do validation
    function validate(newValue) {
    target.hasError(newValue ? false : true);
    target.validationMessage(newValue ? "" : overrideMessage || "This field is required");
    }

    //initial validation
    validate(target());

    //validate whenever the value changes
    target.subscribe(validate);

    //return the original observable
    return target;
};

次に、viewModelを拡張して、次の方法で観察可能にします。

self.dateOfPayment: ko.observable().extend({ required: "" }),

このスタイルの検証には、オンラインで多数の例があります。

5
ChrisW