エントリー
こんにちは、読者の皆様。 この記事では、クライアント側でフォームの内容をチェックするトピックについて説明します。 クライアントで動作する言語の形成の夜明けに、これが主なタスクでした。 時間の経過とともに、これらの言語は新しい機能（DOM操作、スタイル管理など）を獲得しましたが、フォームを検証するタスクは消えていません。 確かに、HTML5の出現により、電子メールなどのフォームフィールドのタイプを指定することが可能になり、ブラウザ自体が検証を引き継ぎます。 この機能は現在Operaに実装されているため、これまでのところこれに依存する必要は特にありません。 したがって、この問題を徹底的に検討したいと思います。 ほとんどの場合、検証は次のように行われます。各フィールドにIDが与えられ、送信時にそれらを引き出して、途中で内容をチェックします。 そして、一貫性の欠如を除いて、誰もがこのアプローチに長けています。 したがって、私はこの問題に対する私の解決策に注意を向けたいと思います。
それで始まった！
例は、名前、メールボックス、性別のフィールドを含む単純なフォームです。
HTMLファイルコード：
<html> <head> <style type="text/css"> input[type="text"] { border: 1px solid #D4E2F7; } input { margin: 3px 0px 3px 15px; } </style> <script type="text/javascript"> .... </script> </head> <body> <form name="form" action="6.php" method="POST"> <input type="text" name="name" value="My name" /><br> <input type="text" name="email" value="email@mail.com" /><br> <input type="radio" name="sex" checked="checked" value="male" />male<br> <input type="radio" name="sex" value="female" />female<br> <input type="submit" value="Ok" /> </form> </body> </html>
他のすべてのコードは<script>タグに配置されます。
最初に、必要なすべてのフィールドを設定し、それらにプロパティを事前に提供する関数を作成します。 フィールド名は、members配列にリストされています。
function createField() { var members = new Array('required', 'regexp'); for(var i = 0; i < arguments.length; i++) { this[members[i]] = arguments[i]; } } // absolute regexp createField.prototype.regexp = /^[A-z0-9-_+. ,@]{1,}$/ig; createField.prototype.valid = false; createField.prototype.required = true; createField.prototype.nullify = function() { this.valid = false; };
次に、プロトタイプで、フィールドのデフォルト値を示します。
regexp-対応するフィールドの値が満たさなければならない正規表現。
有効 - 正規表現の正規表現でフィールド値をチェックした結果。
required-このフィールドが必須かどうかのインジケーター（フィールドを空白のままにすることが可能かどうか）。
nullify（）は、 有効なフィールドを元の状態に戻すメソッドです 。
var single = new Array(); single['name'] = new createField(); single['email'] = new createField(true, /^[A-z0-9._-]+@[A-z0-9.-]+\.[Az]{2,4}$/); single['sex'] = new createField(true, /male$/ig);
そのまま、フォームの原始的なイメージを作成します。 名前、メール、性別の3つのフィールドがあり、それぞれを空白にすることはできません。 さらに、最後の2つのフィールドの値は、2番目のパラメーターで指定された正規表現を満たす必要があります。
var Singleton = { fields : single, regForm : false, nullify_values : function() { for(i in this.fields) { this.fields[i].nullify(); } }, ... };
コードのこのセクションでは、Singletonオブジェクトを宣言します。 fieldsフィールドの目的は明確です。 regFormフィールドは、フォームを含むオブジェクトです。 これにより、フォームフィールドとその値にアクセスできます。
nullify_values（）メソッドは、「サブオブジェクト」の有効なフィールドの値（ フィールドはオブジェクトの配列であるため）を元の状態に戻します。
そして最後に、最も興味深い。 主な機能を含むsubmit（）メソッド。
submit : function() { if(this.regForm) { // set property valid to false for every form field this.nullify_values(); var i = null; // walks through the form fields, pick and if required check their values for(i = 0; i < this.regForm.elements.length; i++) { // current field var oField = this.regForm.elements[i]; switch (oField.type) { case "button": case "submit": case "reset": break; case "checkbox": case "radio": if(!oField.checked) { break; } default : // javascript trim function analogue oField.value = oField.value.replace(/^\s*/, '').replace(/\s*$/, ''); if(!oField.value) { oField.value = ''; } // if this field is out of interest if(!this.fields[oField.name].required) { this.fields[oField.name].valid = true; this.regForm[i].style.border=""; } // if this field is required else { var match = this.fields[oField.name].regexp.test(oField.value); // ... and fits regular expression if(match) { this.fields[oField.name].valid = true; this.regForm[i].style.border=""; } this.fields[oField.name].regexp.test(oField.value); } } } // now all we need is to check if the whole form is valid // we perform it by comparing number of form fields and number of valid fields // they should be equal var validForm = 0; var fieldsLength = 0; for(i in this.fields) { fieldsLength++; if(this.fields[i].valid) { validForm++; } else { this.regForm[i].style.border="1px solid #FF0000"; break; } } if(validForm == fieldsLength) { this.regForm.submit(); } else { this.nullify_values(); return false; } } }
まず、有効な値をゼロにします。 次に、フォームのフィールドを調べます。 フィールドに特別なセマンティックロード（リセットなど）がない場合、またはチェックマークが付いていない場合は、スキップします。 先頭および末尾のスペースを削除します。 フィールドが必要な場合は、正規表現を使用してその内容を確認します。 そうでない場合は、先に進みます。 ここで、フィールドの総数と有効なフィールドの数を計算します。 そして、それらが一致する場合、フォームを送信できます。
single = null; window.onload = function() { var regForm = document.forms[0]; Singleton.regForm = regForm; Singleton.regForm.onsubmit = function() { return Singleton.submit(); }; };
そして最後に、 Singleton.fieldsの値を誤って変更してフォームを取得し、 送信イベントハンドラーを与えないように、 単一のオブジェクトを「ゼロアウト」します。
辛い
1 singleを無効にすると、途中でSingleton.fieldsも破棄されますか？ いや そして、ここに理由があります。 オブジェクトを変数フィールドに割り当てると、オブジェクト自体は渡されず、オブジェクトへのリンクのみが渡されます。 物理的には、オブジェクトはいわゆるメモリーヒープに格納されます。 また、少なくとも1つのリンクが存在するまで、ガベージコレクタによってそこから削除されません。 したがって、配列への参照のみを削除し、オブジェクトは破棄されませんでした。 それらへの別のリンク、つまりSingleton.fieldsがあります。
2 。 検証を必要としない多数のフィールドの場合、多くのオブジェクトが作成される可能性がありますが、そのプロパティは一般的には必要ありませんか？ いや そして、ここに理由があります。 オブジェクトフィールドを取得すると、JSインタープリターは最初にオブジェクト自体を調べ、そうでない場合はプロトタイプを調べます。 したがって、デフォルト値はプロトタイプに単一のコピーで保存されますが、これは収益性は高くありません。
３ 。 フィールドの内容が正規表現を満たしているときに、もう一度チェックする必要があるのはなぜですか？ これにはわかりやすい答えがありません。 経験的に、 RegExp.test（）関数を使用すると、最初に期待される結果が返され、次に正反対の結果が返されることに気付きました。 この行をコメントアウトしてみて、どのように動作が予測不能になるかを自分で確認してください。 通常の場合、これは観察されません。
Cymes
このスクリプトは、転送中にフィールド名（ 単一の配列キー）と正規表現を変更するだけでチェックできるという意味で、非常に柔軟性があります。
ここでスクリプトを見ることができます 。
ここからダウンロードしてください 。
あとがき
したがって、フォームの内容をチェックするという単純化されたタスクで、私たちは対処しました。 ただし、次の質問が残りました。
間違って入力されたフィールドに任意のスタイルを設定する方法は？
データの入力時にフィールドチェックが必要な場合など、他のイベントに検証を追加する方法は？
ユーザーがエラーとは何かを理解するのに役立つメッセージを表示する方法は？
ページに複数のフォームがある場合はどうすればよいですか？
これらの問題については、投稿の後半で検討する予定です。