いちから掲示板サイトを作ってみる講座、3回目になります。
今回はPHPとHTMLとMySQLを使った、こんな会員登録フォームの作り方について。
下記をクリックすると別ウィンドウで確認できます。
↓↓↓
前回の記事でフォームの作り方を説明しましたが、このままでは、フォームが空っぽのままでも登録できてしまいます。
今回はフォームの中が空っぽだったり、パスワードの文字数が少なすぎたり、あるいは確認用パスワードの値が違っていたりする場合にエラーを返す方法を解説します。
前回までの内容は、こちらの目次からご覧ください。
PHPで会員登録フォームにエラーチェック機能を追加する
ではフォームにエラーチェック機能を付けていきましょう。
前回と同様、CSSと画像登録部分は省き、簡易版を作っていきます。
作成するサイトの外見は次のようになります。
コードは次のとおり。
【test2.php】
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 |
<?php session_start(); require('dbconnect.php'); // ★ポイント1★ if (!empty($_POST) ){ // ★ポイント2★ if ($_POST['name'] == "" ) { $error['name'] = 'blank'; } if ($_POST['email'] == "" ) { $error['email'] = 'blank'; } if ($_POST['password'] == "" ) { $error['password'] = 'blank'; } if ($_POST['password2'] == "" ) { $error['password2'] = 'blank'; } // ★ポイント3★ if (strlen($_POST['password'] )< 6 ) { $error['password'] = 'length'; } // ★ポイント4★ if (($_POST['password'] != $_POST['password2']) && ($_POST['password2'] != "")){ $error['password2'] = 'difference'; } if(empty($error)) { $_SESSION['join'] = $_POST; header('Location: test3.php'); exit(); } } ?> <!DOCTYPE html> <html lang="ja"> <head> <title>会員登録をする</title> </head> <body> <form action="" method="post" enctype="multipart/form-data" class="registrationform"> <p>ニックネーム<input type="text" name="name" style="width:400px" value="<?php echo htmlspecialchars($_POST['name']??"", ENT_QUOTES); ?>"> <?php if (isset($error['name']) && ($error['name'] == "blank")): ?> <p class="error">名前を入力してください"</p> <?php endif; ?> </p> <p>email<input type="text" name="email" style="width:150px" value="<?php echo htmlspecialchars($_POST['email']??"", ENT_QUOTES); ?>"> <?php if (isset($error['email']) && ($error['email'] == "blank")): ?> <p class="error">emailを入力してください</p> <?php endif; ?> </p> ★ポイント5★ <p>パスワード<input type="password" name="password" style="width:150px" value="<?php echo htmlspecialchars($_POST['password']??"", ENT_QUOTES); ?>"> <?php if (isset($error['password']) && ($error['password'] == "blank")): ?> <p class="password"> パスワードを入力してください</p> <?php endif; ?> <?php if (isset($error['password']) && ($error['password'] == "length")): ?> <p class="error"> 6文字以上で指定してください</p> <?php endif; ?> </p> <p>パスワード再入力<span class="red">*</span><input type="password" name="password2" style="width:150px"> <?php if (isset($error['password2']) && ($error['password2'] == "blank")): ?> <p class="error"> パスワードを入力してください</p> <?php endif; ?> <?php if (isset($error['password2']) && ($error['password2'] == "difference")): ?> <p class="error"> パスワードが上記と違います</p> <?php endif; ?> </p> <input type="submit" value="確認する" class="button"> </form> </body> </html> |
★ポイント★ごとにコードの組み方を解説していきます。
ポイント① 【値が入っていたら】というif条件式を入れる
PHPでエラーについて設定する前に、まず、この条件式を入れておきましょう。
|
1 |
if (!empty($_POST) ){ |
「もしも【$_POST】の値が空っぽでないなら、次の処理をしてね」という意味になります。
【$_POST】はフォームによって投稿される値です。
この式をいれておかないと、ページを開いてすぐに処理が始まってしまい、ユーザーが何かを入力する前にエラーメッセージが表示されてしまいます。
ポイント② 【フォームの要素が空っぽだったら】というif条件式を入れる
次に「フォームの要素が空っぽだったらエラーを返す」ための条件式をいれておきましょう。
HTMLのBODYタグの前のPHPには、次のように書いておきます。
|
1 2 3 |
if ($_POST['name'] == "" ) { $error['name'] = 'blank'; } |
「もしも【$_POST[‘name’]】が空っぽなら、【’blank’】というエラー名にするね」という意味になります。
【$_POST[‘name’]】は、フォームの「ニックネーム」に投稿される値のことです。
BODYタグ以降のフォームのニックネームを入力する箇所には、次のように書きます。
|
1 2 3 4 5 |
<p>ニックネーム<input type="text" name="name" style="width:400px" value="<?php echo htmlspecialchars($_POST['name']??"", ENT_QUOTES); ?>"> <?php if (isset($error['name']) && ($error['name'] == "blank")): ?> <p class="error">名前を入力してください"</p> <?php endif; ?> </p> |
「もしも【’blank’】エラーが起こったら【名前を入力してください】と表示してね」という意味になります。
なおif構文の中に【 (isset($error[‘name’])】というコードがはいっています。
これは「$error[‘name’]という値があるとして」といった意味です。
これを入れておかないと”Notice Undefined index” エラーが出てくるので、必ず入れておきましょう。
面倒だけど、初めて使う変数では、必ず、この定義が必要になります。
この辺り、前回の記事で解説しています。
ニックネーム以外にも、すべての入力項目に、この空白エラーを設定しておきましょう。
ポイント③ パスワードは一定の文字数以上で入力してもらう
パスワードを一定の文字数以上で入力してほしい時には、次のようにPHPコードをいれます。
|
1 2 3 |
if (strlen($_POST['password'] )< 6 ) { $error['password'] = 'length'; } |
「もしも【$_POST[‘password’]】の値が6文字以下なら、【’length’】というエラー名にするね」という意味になります。
【$_POST[‘password’]】は、フォームの「パスワード」に投稿される値のことです。
【strlen】というのは文字列の長さを取得する関数のことです。
|
1 2 3 4 5 |
<p>パスワード<input type="password" name="password" style="width:150px" value="<?php echo htmlspecialchars($_POST['password']??"", ENT_QUOTES); ?>"> <?php if (isset($error['password']) && ($error['password'] == "length")): ?> <p class="error"> 6文字以上で指定してください</p> <?php endif; ?> </p> |
「もしも【’length’】エラーが起こったら【6文字以上で指定してください】と表示してね」という意味になります。
ポイント④ 確認用のパスワードの値を一致させる
今回のフォームでは、パスワードは、確認用にもう一度入力してもらいます。
もしも最初に入力したパスワードと違っていた場合にエラーを出すには、次のようにコードを書きます。
|
1 2 3 |
if (($_POST['password'] != $_POST['password2']) && ($_POST['password2'] != "")){ $error['password2'] = 'difference'; } |
「もしも【$_POST[‘password’]】と【$_POST[‘password2’]】の値が違っていて、そして【$_POST[‘password2’]】が空っぽじゃないなら、【’difference’】というエラー名にするね」という意味になります。
条件式の中の【!=】は「等しくない」という意味ですが、こんなふうに便利に使えます。
BODYタグ以降のフォームの確認用パスワードを入力する箇所には、次のように書きます。
|
1 2 3 4 5 |
<p>パスワード再入力<span class="red">*</span><input type="password" name="password2" style="width:150px"> <?php if (isset($error['password2']) && ($error['password2'] == "difference")): ?> <p class="error"> パスワードが上記と違います</p> <?php endif; ?> </p> |
「もしも【’difference’】エラーが起こったら「パスワードが上記と違います」と表示してね」という意味になります。
ポイント⑤ パスワードは入力中も見えないようにする
最後にパスワードの入力中の設定について解説します。
次のように、inputタグの中のtype属性を「password」としてあげると、パスワードが入力中に見られないようになります。
|
1 |
<input type="password"> |
入力中のパスワードは次のように表示されます。
簡単にできますし、セキュリティがアップするので、行っておいたほうが良いですよ。
さいごに
今回ご紹介したような汎用的なチェックはかけておきましょう。
エラーチェックをしておかないと変な値がどんどんデータベースに入力されていってしまいます。
パスワードに関しては特に面倒ですが、やっぱりセキュリティ関連は重要です。
次回は登録した値を確認する画面を作っていきますね。
コメント