3

指定されたオプションのフィールドで jQuery 検証を処理する際に、非常に複雑な問題が発生していtype="number"ます。何が起こるかというと、ブラウザ (この場合は Chrome) は、フォームの送信を傍受するという考えで、ユーザーがフィールドに通常の文字を入力できるようにし、とにかく、フィールド値が照会されると、空の文字列を返します。

先に進む前に、これは仕様に沿ったものであると言わなければなりません。

ユーザー エージェントは、有効な浮動小数点数ではない空でない文字列に値を設定することをユーザーに許可してはなりません。

そして後で：

値のサニタイズ アルゴリズムは次のとおりです。要素の値が有効な浮動小数点数でない場合は、代わりに空の文字列に設定します。

ここに問題があります: オプションの数値入力フィールドに文字を入力すると (Chrome で許可されている場合)、フィールドがオプションであるため、jQuery 検証は正しく検証される空の文字列値を取得します。さらに、フィールドはDBでnull可能であり、喜んで保存されるため、空の文字列サーバー側を取得します。

当分の間、私が考えることができる唯一の回避策はこれです：

$('input[type="number"]').keypress(function (evt) {
    if (evt.keyCode < 48 || evt.keyCode > 57)
        evt.preventDefault();
});

問題は、たとえば、ユーザーが間違った入力をコピーして貼り付けた場合など、上記が機能しないことです。ここで、ユーザーが愚かなデータを入力しようと決心している場合、結果に直面してそのフィールドを無効にすることしかできないことに気づきましたが、優れた開発者になろうとして、上記の回避策 (また、コピーペーストの別の回避策を書かずに)。

4

3 に答える 3

4

.focusout() jquery のイベントを利用できます。http://api.jquery.com/focusout/

次にisNumeric、有効な番号を確認するために使用します。http://api.jquery.com/jQuery.isNumeric

だからこのようなもの..

$('input[type="number"]').focusout(function (evt) {
   if(!$.isNumeric($(this).val())){
     $(this).val("");
   }
});
于 2013-05-10T14:56:38.550 に答える
3

jquery.alphanumは、無効なテキストが最初に入力されるのを防ぐために作成したプラグインです。コピーと貼り付けが非常にうまく処理され、クロスブラウザー互換性があります。

$('input[type="number"]').numeric();

プラグインは貼り付けイベントをトラップし、ユーザーに表示される前にテキストをフィルタリングします。

于 2013-05-10T15:12:02.667 に答える
0

input.validity.badInput をチェックして、ユーザーが有効な数値ではないものを入力したかどうかを確認できます。入力されたデータが有効でない場合、ブラウザーはユーザーがフォームを送信できないようにする必要があります (novalidate="" を使用しない限り)。

ユーザーが入力した実際のデータにアクセスすることはできません。これは、数値が必要なだけであると言ったため、ブラウザーが処理します。データへのアクセスが必要な場合は、type=text を pattern="" などと一緒に使用します。

于 2013-09-03T17:39:53.530 に答える