web-dev-qa-db-ja.com

ノックアウト検証プラグインのネイティブルールを使用してカスタムエラーメッセージを設定します

Asp.netMVC3とknockoutjsライブラリを使用しています。クライアント側の検証を行う必要があります。ノックアウト検証プラグインを調べています。

したがって、jsコードで次のko.observable値を宣言します。

 var numberValue = ko.observable().extend({ number: true }) 

これは私の見解です:

<input data-bind = "value: numberValue " />

ユーザーが数値ではない値を入力すると、「数値を入力してください」というエラーメッセージが表示されます。別のエラーメッセージを表示しても、ネイティブルールを使用できますか?このためだけにカスタム検証ロジックを作成したくありません。いくつかの実用的な例の助けは大歓迎です。ありがとうございました!

19
Mdb

検証エクステンダーを作成するコードは次のとおりです。

addExtender: function (ruleName) {
    ko.extenders[ruleName] = function (observable, params) {
        //params can come in a few flavors
        // 1. Just the params to be passed to the validator
        // 2. An object containing the Message to be used and the Params to pass to the validator
        //
        // Example:
        // var test = ko.observable(3).extend({
        //      max: {
        //          message: 'This special field has a Max of {0}',
        //          params: 2
        //      }
        //  )};
        //
        if (params.message) { //if it has a message object, then its an object literal to use
            return ko.validation.addRule(observable, {
                rule: ruleName,
                message: params.message,
                params: params.params || true
            });
        } else {
            return ko.validation.addRule(observable, {
                rule: ruleName,
                params: params
            });
        }
    };
},

ご覧のとおり、すべてのエクステンダーは、paramsオブジェクトまたはparamsとカスタムメッセージを含むオブジェクトリテラルを受け取ることができます。だからあなたの場合。

var numberValue = ko.observable().extend({ number: { 
    message: "some custom message", 
    params: true 
} }) 

お役に立てれば。

34
madcapnmckay

このようにvalidateプロパティを追加するだけです

 emailAddress: ko.observable().extend({  // custom message
        required: { message: 'Please supply your email address.' }
    }),
33
Sirarpi

既存の答えは正しいです。ただし、すでに他のパラメーターを受け入れているバリデーターのメッセージを変更する場合は、それらの既存のパラメーターをparamsという名前の新しいオブジェクトでラップする必要があります。

ko.observable().extend({
    unique: {
        params: {
            collection: foo,
            valueAccessor: function(item) {
                return item.bar();
            }
        },
        message: 'some custom message'
    }
}
1
Rudey