読者です 読者をやめる 読者になる 読者になる

リスを倒す 『初めてのPHP,MySQL,JavaScript&CSS』

『初めてのPHP,MySQL,JavaScript&CSS』勉強奮闘記

16-1. JavascriptとPHPによる検証とエラー処理①

16章いきまーす。
17章以降はCSSなので、16章と放置していた分を終わらすと一旦リス終了です。。。
がんばろ。

16章は、PHPjavascriptの基礎を勉強してきたので、これらを連携させたwebフォームの作成方法を見ていきます。
PHPを使ってフォームを作り、送信するデータを完全で正しいものにするためにJavascriptを使ってクライアントサイドでの検証を実行します。入力の最終的な検証はそのあとPHPプログラムで行い必要な場合には、ユーザーに修正をうながすフォームを再表示します。


1-1. Javascriptを使ったユーザー入力の検証


Javascriptによる検証はwebサイトに向けたものではなく、あくまでもユーザーに対する支援と捉えるべきと。リスが。
理由としては、サーバーに送られて来るデータはjavascrip1tによる検証がサポートされていたとしても、信用できるものではないからです。また、入力検証を実行するJavascriptに全面的に依存できない理由には、javascriptを無効にしているユーザーや、サポートしないブラウザを使っている人が存在することもあります。
Javascriptを使った最良の検証は、
・フォームのフィールドが空でないかどうか調べる
・メールアドレスが適切な形式にしたがっているか
・入力された値が適切な範囲に収まっているかどうかを確認する
などで使用します。

1-2. サインアップフォームの作成


まずは、会員や登録ユーザー向けに使用されている、一般的なサインアップフォームを作成します。
ここで求める入力は、以下です。
・forename(名前)
・surname(名字)
・username(ユーザー名)
・password(パスワード)
・age(年齢)
・emailadress(メールアドレス)

コードは以下。
f:id:taro-blog2323:20161211134115p:plain

scriptのタグ間には、「validate」という名前の関数が1つあります。この関数自体は、フォームの各入力フィールドを検証する6つの関数を呼び出します。この6つの関数はそれぞれ、フィールドに妥当な値が入力されている場合には空のストリングを返し、そうでない場合にはエラーメッセージを返します。
入力に誤りがある場合には、スクリプトの最後で警告ボックスをポップアップさせ、その誤りを表示します。

「validate」関数は、妥当性が確認された場合はtrue、そうでない場合はfalseを返します。


そして以下が出力されます。
f:id:taro-blog2323:20161211134148p:plain

きょうはいじょーーーー。。。。
hhhh