バリデーションチェックの基本

Webアプリケーション開発において、ユーザー入力を正しく処理することは非常に重要です。意図しないデータが送信された場合、エラーが発生したり、セキュリティ上のリスクが生じたりする可能性があります。

そこで、バリデーションチェックの出番です。バリデーションチェックとは、ユーザーが入力したデータが正しい形式や内容であるかを検証する処理です。

本記事では、バリデーションチェックの基本的な仕組みと、初心者でも簡単に実装できる方法を解説します。

この記事でわかること

バリデーションチェックとは？

バリデーションチェックとは、Webフォームに入力されたデータが正しいかどうかを確認する処理のことを指します。例えば、メールアドレスの形式が正しいかどうか、電話番号が数字のみで入力されているかどうかなどをチェックします。

バリデーションチェックを行うことで、以下のようなメリットを得られます。

バリデーションチェックには、大きく分けて以下の2種類があります。

クライアントサイドバリデーションは、ユーザーのブラウザ上で実行されるバリデーションチェックです。JavaScriptを用いて実装されます。

クライアントサイドバリデーションのメリットは、以下のような点が挙げられます。

デメリットとしては、以下のような点が挙げられます。

サーバーサイドバリデーションは、サーバー側で実行されるバリデーションチェックです。PHPやRubyなどのサーバーサイド言語を用いて実装されます。

サーバーサイドバリデーションのメリットは、以下のような点が挙げられます。

デメリットとしては、以下のような点が挙げられます。

HTML
<input type=”text” name=”email” required> <input type=”submit” value=”送信”>

JavaScript
const emailInput = document.querySelector(‘input[name=”email”]’); emailInput.addEventListener(‘input’, () => { const email = emailInput.value; const regex = /^(([^<>()[\]\\.,;:\s@”]+(\.[^<>()[\]\\.,;:\s@”]+)*)\|(“.+”))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])\|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/; if (!regex.test(email)) { emailInput.classList.add(‘error’); } else { emailInput.classList.remove(‘error’); } });

JavaScript

上記のコードでは、HTMLのrequired属性を用いて、メールアドレスの入力必須チェックを行っています。また、JavaScriptのaddEventListenerを用いて、inputイベントが発生した際にバリデーションチェックを行っています。

バリデーションチェックには、正規表現を用いて入力値の形式をチェックするなど、さまざまな方法があります。

PHP
<?php $email = $_POST[‘email’]; if (!filter_var($email, FILTER_VALIDATE_EMAIL)) { echo ‘メールアドレスが正しくありません’; exit; } // ここに処理 ?>