エントリー
こんにちは、読者の皆様。 この記事では、クライアント側でフォームの内容をチェックするトピックについて説明します。 クライアントで動作する言語の形成の夜明けに、これが主なタスクでした。 時間の経過とともに、これらの言語は新しい機能(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]; } }
次に、プロトタイプで、フィールドのデフォルト値を示します。
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) {
まず、有効な値をゼロにします。 次に、フォームのフィールドを調べます。 フィールドに特別なセマンティックロード(リセットなど)がない場合、またはチェックマークが付いていない場合は、スキップします。 先頭および末尾のスペースを削除します。 フィールドが必要な場合は、正規表現を使用してその内容を確認します。 そうでない場合は、先に進みます。 ここで、フィールドの総数と有効なフィールドの数を計算します。 そして、それらが一致する場合、フォームを送信できます。
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インタープリターは最初にオブジェクト自体を調べ、そうでない場合はプロトタイプを調べます。 したがって、デフォルト値はプロトタイプに単一のコピーで保存されますが、これは収益性は高くありません。
3 。 フィールドの内容が正規表現を満たしているときに、もう一度チェックする必要があるのはなぜですか? これにはわかりやすい答えがありません。 経験的に、
RegExp.test()関数を使用すると、最初に期待される結果が返され、次に正反対の結果が返されることに気付きました。 この行をコメントアウトしてみて、どのように動作が予測不能になるかを自分で確認してください。 通常の場合、これは観察されません。
Cymes
このスクリプトは、転送中にフィールド名(
単一の配列キー)と正規表現を変更するだけでチェックできるという意味で、非常に柔軟性があります。
ここでスクリプトを見ることができ
ます 。
ここからダウンロードして
ください 。
あとがき
したがって、フォームの内容をチェックするという単純化されたタスクで、私たちは対処しました。 ただし、次の質問が残りました。
間違って入力されたフィールドに任意のスタイルを設定する方法は?
データの入力時にフィールドチェックが必要な場合など、他のイベントに検証を追加する方法は?
ユーザーがエラーとは何かを理解するのに役立つメッセージを表示する方法は?
ページに複数のフォームがある場合はどうすればよいですか?
これらの問題については、投稿の後半で検討する予定です。