0

knokcout.js と knockout.validation プラグインを使用しています。コードに検証メッセージに関する問題があります。次のような観察可能なフィールド（パスワードなど）に2つの検証を適用しました：

Jsコードで

..
this.Password = ko.observable().extend({
       required: { message: "Enter password" },
       minLength: { params: 6, message: "Must be 6 chars long" }
});
..

Htmlで

<input type="password" data-bind="value: Password, valueUpdate:'afterkeypress"
  placeholder="Password" />

今私の問題は、検証メッセージを表示する代わりにパスワードフィールドに1文字を入力すると、(Must be 6 chars long)メッセージが表示(Enter password)され、フィールドに2番目の文字を入力するとメッセージが表示されることです(Must be 6 chars long)。そして、この動作は、検証を適用したすべてのフィールドにあります。どこに問題があるのか​​教えてください。

4

1 に答える 1

1

コードは「afterkeypress」ではなく「keypress」に反応しているようです。サンプル HTML の「afterkeypress」の後に一重引用符がありません。

ドキュメントには updateValue オプションとして「afterkeypress」が記載されていませんが、私のテストでは機能しているようです。

値バインディングのドキュメントから

バインディングに valueUpdate というパラメーターも含まれている場合、これは、変更イベント以外の変更を検出するために KO が使用する追加のブラウザー イベントを定義します。次の文字列値は、最も一般的に役立つ選択肢です。

  • "keyup" - ユーザーがキーを離したときにビュー モデルを更新します
  • "keypress" - ユーザーがキーを入力したときにビュー モデルを更新します。キーアップとは異なり、ユーザーがキーを押している間、これは繰り返し更新されます
  • "afterkeydown" - ユーザーが文字の入力を開始するとすぐにビュー モデルを更新します。これは、ブラウザのキーダウン イベントをキャッチし、イベントを非同期に処理することで機能します。

これらのオプションのうち、ビュー モデルをリアルタイムで更新し続けたい場合は、"afterkeydown" が最適です。

ドキュメントでは、最良の結果を得るために「afterkeydown」の選択を使用することを推奨しています。

「keypress」「afterkeypress」「afterkeydown」を使ったサンプルを作成しました。

参照: http://jsbin.com/anerop/3/edit (validatedObservable; 注: [Run with js] ボタンをクリックします)

「afterkeydown」にバインドすると、最高のユーザー エクスペリエンスが得られるようです。コントロールがフォーカスを失うまで、「afterkeypress」は更新されません。

サンプル データ バインド:

<input type="password" data-bind="value: Password, valueUpdate:'afterkeydown'"
  placeholder="Password" />

validatedObservable を使用しない別の例を作成し、同様の結果を得ました。

参照: http://jsbin.com/itatic/1/edit (not validatedObservable; 注: [Run with js] ボタンをクリックします)

于 2013-02-21T06:30:50.587 に答える