knockout.js - ノックアウト検証

Question

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

Answer 1

ノックアウトのドキュメントに記載されている内容を適切にセットアップして使用するノックアウト検証をご覧ください。下：ライブ例1：入力を強制的に数値にする

あなたはそれがフィドルで生きているのを見ることができます

更新：フィドルは、cloudfareCDNURLを使用して最新のKO2.0.3およびko.validation1.0.2を使用するように更新されました

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

Answer 2

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: "" }),

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

Answer 3

Knockout.jsの検証は便利ですが、堅牢ではありません。サーバー側の検証レプリカを常に作成する必要があります。あなたの場合（knockout.jsを使用する場合）、JSONデータをサーバーに送信し、非同期で送り返すので、ユーザーにクライアント側の検証を見ていると思わせることができますが、実際には非同期のサーバー側の検証になります。

ここで例を見てくださいupida.cloudapp.net:8080/org.upida.example.knockout/order/create?clientId=1 これは「注文の作成」リンクです。「保存」をクリックして、製品で遊んでみてください。この例は、codeplexのupidaライブラリ（このライブラリのSpringMVCバージョンとasp.netMVCがあります）を使用して実行されます。