ユーザー入力フォームの処理:コードの複雑さを減らす方法

管理インターフェースとユーザーインターフェースを書いている間、私はよく考えていました-最小限の労力で最適な品質を保証するような方法ですべてをしますか?



今日は、Webアプリケーションでフォーム入力エラーを処理する問題について説明したいと思います。 まだ、ユーザーが入力したデータを完全に信頼し、モニターの反対側に座っている生き物を神聖な牛と考えていますか? 入力制御の原理が以前に明確でない場合、これは最初の攻撃の後に渡ります。 しかし、ポイントに。



私はPHPでプログラミングしているため、サーバーサイドのコード例はこの言語で作成されます。



コールバック注文フォームでプロジェクトを補完することにしたと想像してください。 あなたは決して知らない-ラインはしばしば過負荷であり、クライアントは彼の体重を感じたい、ファッションは...まあ、一般的には。 最も簡単なhtmlをすばやくスローし、ハンドラーを作成します-データは一般にデータベースにうまく収まります-ほとんど準備ができています。 最小のこと-エラー処理を記述することは残っています。 (もちろん、開発順序は非常に条件付きです)。 これにより、ユーザーが入力した情報の正確性を検証し、結果をユーザーに通知するにはどうすればよいですか?



正しく記入されたワークフォームの最小の場合。 しかし、ユーザーが間違いを犯し、データが正しくない場合は、ページを再度生成してユーザーに送信する必要があります。 この場合、入力されたすべてのフィールドの値を保持することが非常に望ましいため、コードが増加します。



基本的なエラー処理を検討してください(ユーザーデータは基本的なチェックとフィルタリングに既に合格していると思われます)。



<?php $errors = array(); if ( empty($person) || empty($phone) || empty($question) ) { $errors[] = '   '; } if ( count($errors) ) { $template->assign_switch('errors', 1); $template->vars(array( 'ERRORS' => implode(' ', $errors), 'PERSON' => $person, 'PHONE' => $phone, 'QUESTION' => $question ) ); $template->send(); } ?>
      
      







クライアントに利便性をもたらしたい。 そして、それは救助に来ます...



Javascript


 <script language="text/javascript"> <!-- // function form_submit() { if ( ( document.forms['callback'].person.value == '' ) || ( document.forms['callback'].phone.value == '' ) || ( document.forms['callback'].question.value == '' ) ) { alert('   '); } return; } // --> </script>
      
      







アラート機能はトレーニングの例としてのみ使用されます。統計によると、一部のユーザーはOSデザインに表示され、Webページの一部として認識されないため、読まずに閉じます。



もう一度、サーバーの検証が依然として必要であるという事実に注目します。



なぜこれが必要なのかを聞かれるたびに、2004年のことを思い出します。初心者のWeb開発者である私がウクライナのナイスガイと連絡を取り合ったときのことです。 経験から学ぼうとして、どういうわけか彼にエラーを処理する方法を尋ねました。 彼はJavaScriptでのみこれを行うことが判明しました。 ページをコンピューターに保存し、フォームハンドラーのアドレスを変更し、検証なしでデータを送信できるという事実について、私自身の経験を共有する必要がありました。 また、検証がサーバー上にない場合、不正なデータが正常と認識され、すべてがアプリケーションロジックに依存します。 プロセスの後半で、よく似た脆弱性に遭遇しました。 結論はそれ自体を示唆しています-クライアントアプリケーションとサーバー間の相互作用を理解せずにWebアプリケーションを記述した場合、結果は異なる可能性があります。



時間が経つにつれて、フォームの複雑さが増し、次のテクノロジーに目を向けます。



アヤックス


これで、別のメソッドで便利にチェックが行われ、少し補足されます。その結果、次のようなコードが得られます。



 <?php $errors = array(); if ( empty($person) || empty($phone) || empty($question) ) { $errors[] = '   '; } $ajax = isset($_REQUEST['ajax']); if ( count($errors) ) { if ( empty($ajax) ) { $template->assign_switch('errors', 1); $template->vars(array( 'ERRORS' => implode(' ', $errors), 'PERSON' => $person, 'PHONE' => $phone, 'QUESTION' => $question ) ); $template->send(); } else { $ajax_handler->send(array( 'errors' => 1, 'error_text' => implode(' ', $errors), ) ); } } else { $ajax_handler->send(array( 'errors' => 0, 'error_text' => '', ) ); } ?>
      
      







さらに、クライアントのブラウザで、同じアラートを表示したり、他の便利な方法でメッセージを表示したりできます。 使いやすさは最優先です。ページをリロードする必要はありません。さらにコードをサポートすることも便利です。エラー処理はすべて1か所に集められます。



悪いアドバイス


フォームは少数のフィールドで構成されていますが、誤ったデータを受信した後に次のフィールドを受信した後に出力を変更することはそれほど難しくありません。 そして、大量のデータがある場合はどうなりますか? この場合、データ出力を削除して次のコードを取得することで、作業を容易にし、古いブラウザに対するそのような完全なサポートを拒否したいという要望があります。



 <?php if ( count($errors) ) { if ( empty($ajax) ) { header('Location: form.php?error_code=1'); exit(); } } ?>
      
      







JavaScriptを無効にしたデバイスの完全なサポートを意図的に放棄しながら、さらなるコードサポートの作業を大幅に簡素化しました。 自分の都合のために何かを犠牲にしなければなりませんでした。 しかし、開発の質に重点が置かれている場合、このアプローチは正当化されません。



おわりに


現時点では、データ検証の実験を続けています。 さらに最適な完璧なソリューションを探しています。 批判に耳を傾け、読者とさまざまなアプローチのすべての側面について議論できることを嬉しく思います。



All Articles