21
Help us understand the problem. What are the problem?

More than 3 years have passed since last update.

posted at

updated at

入力フォームのバリデーションチェックについてわかりやすく解説!

この記事で分かること

  • バリデーション(入力チェック)とは何か
  • バリデーション(入力チェック)の役割
  • 入力フォームで入力する項目に合わせたバリデーションの書き方

バリデーション(入力チェック)とは

  • 入力内容が要件を満たしているかを確認すること
    • (例)入力必須項目に未入力がないかを確認する 

スクリーンショット 2019-04-27 17.27.13.png

バリデーション(入力チェック)の役割

  • フォームに入力して欲しい項目が正しい形式で入力されているかを確認し、入力ミスを防ぐ役割があります

(例)バリデーション(入力チェック)が無効になっている場合

バリデーション(入力チェック)の役割について、もう少しわかりやすく説明します。
以下のようなお問い合わせフォームがあるとします。

スクリーンショット 2019-04-27 16.57.04.png

間違った内容が送られてしまう

ユーザーが入力項目に以下のように入力したとします。

スクリーンショット 2019-04-27 17.01.14.png

「メールアドレス」の項目に間違えて「名前」を入力してしまいました。
バリデーション(入力チェック)がないとこのまま入力内容が送られてしまいます。

入力ミスを防ぐ

なので、以下のようにフォームに入力して欲しい項目が正しい形式で入力されているかを確認し、事前に入力ミスを防ぐ役割があります

スクリーンショット 2019-04-27 17.07.24.png

入力フォームで入力する項目に合わせたバリデーションの書き方

バリデーションは、入力項目によって入力される値が異なるので、入力項目に合わせたバリデーションを実装する必要があります。

ここでは、よく使うバリデーションを3つ紹介します。

1.必須項目のチェック

  • 必須項目に未入力がないかをチェックします

コード例

  • (例)名前の項目を未入力チェックしたい場合
index.php
<?php

  if (empty($_POST["name"])) {
        echo "この項目は入力必須です";
    }
?>

解説

  • empty関数を使って「$_POST["name"]に値が入っている場合は」という条件を与えています。
  • 未入力(値が入っていない)場合は未入力なのでエラーになります。

2.最大値のチェック

  • 文字数の最大値をチェックします

コード例

  • (例)名前の最大値を10文字以内でチェックしたい場合
index.php
<?php

if (mb_strlen($_POST["name"]) > 10) {
        echo "10文字以内で入力してください";
    }
?>

解説

  • mb_strlen関数を使って「$_POST["name"]の文字列の長さを取得します。
  • 10文字以上の場合はエラーになります。

3.メールアドレスの形式チェック

  • メールアドレスが正しい形式で入力されているかチェックします

コード例

  • (例)メールアドレス形式で入力されているかチェックしたい場合
index.php
<?php

if (!preg_match("/^([a-zA-Z0-9])+([a-zA-Z0-9\?\*\[|\]%'=~^\{\}\/\+!#&\$\._-])*@([a-zA-Z0-9_-])+\.([a-zA-Z0-9\._-]+)+$/", $_POST["email"])) {
    echo "メールアドレスの形式で入力してください";
}

?>

解説

  • preg_match関数を使って$_POST["email"]の文字列がメールアドレスの正規表現にマッチするか検索します。
  • メールアドレスの正規表現にマッチしない場合はエラーになります。

【補足】正規表現とは

  • 様々な文字列を一つの文字列で表現する記述方法です

※文字の記述方法のルールやパターンを一つに表現するイメージです。
わらりづらいと思うので、以下でもう少しわかりやすく説明します

(例)メールアドレスの正規表現の場合

次のようにメールアドレスの記述方法にはルールやパターンがあります
例:waka@e2info.com
例:waka3@gmail.com
例:wakawaka@icloud.com

  • メールアドレスは文字列の途中で必ず「@」が入るというルールがあります。また、「@」の前に英数字や記号。「@」の後にドメイン(e2info.com)が入ります。
  • これらのメールアドレスの様々な文字列のルールを、以下のように一つの文字列で表現したものが正規表現です。
メールアドレスの正規表現
/^([a-zA-Z0-9])+([a-zA-Z0-9\?\*\[|\]%'=~^\{\}\/\+!#&\$\._-])*@([a-zA-Z0-9_-])+\.([a-zA-Z0-9\._-]+)+$/

【補足】preg_match関数とは

  • 正規表現にマッチするか検索を行う関数
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Sign upLogin
21
Help us understand the problem. What are the problem?