119

この投稿を読んで、HTML5 に導入された「有効な」入力値と「無効な」入力値の疑似クラスがいくつかあることがわかりました。

javascript から入力フィールドを無効/有効としてマークする方法はありますか? または、使用されている検証方法をオーバーライドできますか?

4

3 に答える 3

203

この目的のために customValidity 関数を使用できます。

customValidity メッセージをフィールドに追加すると、無効になります。メッセージを空の文字列として設定すると、メッセージは再び有効になります (他の理由で無効でない限り)。

field.setCustomValidity("Invalid field.");フィールドを無効にします。

field.setCustomValidity("");HTML5 の制約に違反しない限り、フィールドを有効にします。

于 2013-09-18T22:09:30.730 に答える
5

編集：誰かがあなたがDOMの「有効な」「無効な」属性を探していることを明らかにしました。

を使用して各タグに属性を追加しますdom_object.setAttribute("isvalid", "true")。また、これらの属性を毎回更新する（そしてdom_object.getAttribute("isvalid")毎回使用する）中央検証機能を使用することもできます。

この関数は、要素がフォーカスを失うたびに、または必要なときにいつでも実行できます。

正確にはエレガントではありませんが、残念ながら、現在javascriptとHTML5では「疑似」サポートはありません。

私があなたの質問を理解していれば、Javascriptで検証を行うことができます。ただし、クライアント側の検証、特にjavascriptの検証を回避するのは非常に簡単であることに注意してください。クライアントデータを信頼してはならず、常にサーバー側でチェックを行う必要があります。

たとえば、ソースコードを調べて要素IDを簡単に見つけてdocument.getElementById('some_id').setAttribute('max', new_number)から、最大値を変更することができます（これはリンクからのエントリの1つでした）。

それを行うにはさまざまな方法がありますので、私はあなたに一般的なイディオムを与えることを試みます。

実行することで値を取得できます（サーバーに送信されるフォームとjavascriptで使用されるdocument.getElementById('form_element_id').valueフォームを必ず指定してください）。textareasには、を使用できます。nameid.innerHTML

次に、変数に値を設定します。これを確認するには、さまざまな方法があります。

たとえば、次のことができますif (parseInt(my_value) < 0) //error。正規表現を使用することもできます。すべてを説明することはしませんが、ここから始めることができますhttp://www.w3schools.com/jsref/jsref_obj_regexp.asp。w3schoolsが最良の情報源ではないことは知っていますが、始めても大丈夫だと思います。

onsubmit="return validateForm()次に、検証部分について説明します。フォームタグに追加します。ここで、validateForm（）は、すべてのチェックを行う関数です。そして、関数はtrue有効な場合とfalseそうでない場合にのみ戻ります。これは、デフォルトの検証機能（デフォルトでは何もしません）をオーバーライドします。

したがって、上記の例では、//errorはに置き換えられreturn falseます。他のこともできます。エラーを警告してからfalseを返すなど。javascriptを使用して無効なフィールドを強調表示することもできます（これが「入力フィールドをjavascriptから無効/有効としてマークする」という意味かどうかはわかりません）

もちろん、すべてのフィールドをチェックしたくない場合は、特定のフィールドが合格した場合にのみtrueを返す必要があります。繰り返しますが、これに頼るべきではありませんが、平均的な人々を思いとどまらせるためだけに外出しているのであれば、それは簡単な解決策です。

于 2012-05-27T23:42:32.790 に答える
-18

入力フィールドをjavascriptから無効/有効としてマークする方法はありますか？

残念ながら、JavaScriptで疑似クラスのスタイルを設定することはできません。疑似クラスは実際の要素ではないため、実際のDOMには存在しません。

バニラJavaScriptでは、検証APIを使用します。

jQueryでは、これを簡単に行うことができます。http：//jsfiddle.net/elclanrs/Kak6S/

if ( $input.is(':invalid') ) { ... }

または、使用した検証方法を上書きできますか？

HTML5検証を使用している場合は、マークアップに固執します。それ以外の場合は、JSでHTML5検証を無効にし$form.attr('novalidate', 'novalidate')、JSを使用してフィールドを検証してから、必要に応じてvalidまたはinvalidクラスを追加できます。HTML5以外のブラウザをサポートするために、このように機能するプラグインを作成しました。

于 2012-05-27T23:45:31.630 に答える