JavaScript入力チェック完全攻略！初心者もマスターできる10のサンプルコード

はじめに
●JavaScriptによる入力チェックの基本
- ○入力チェックの重要性
- ○JavaScriptとは？
●入力チェックの方法
●入力チェックの応用例
●注意点と対処法
まとめ

はじめに

この記事を読めば、JavaScriptを使った入力チェックの方法がマスターできるようになります。

入力チェックはウェブアプリケーション開発において重要な機能であり、ユーザーの入力データを正しく受け取るためには避けて通れません。

しかし、初心者には難しく感じることもあるでしょう。

この記事では、初心者でも分かりやすいサンプルコードを交えながら、JavaScriptで入力チェックを行う方法や注意点、カスタマイズ方法を徹底解説します。

最後まで読んで、入力チェックのプロを目指しましょう！

●JavaScriptによる入力チェックの基本

JavaScriptを用いた入力チェックは、ウェブ開発の中で非常に重要な役割を果たします。

ユーザーから提供されるデータを正しく処理し、ウェブアプリケーションの信頼性と安全性を保つために、JavaScriptでの入力検証は欠かせません。

○入力チェックの重要性

ウェブアプリケーションでは頻繁にユーザーのデータを受け取ります。

このデータに不備や不正な値が含まれている場合、想定外のエラーやセキュリティ上のリスクが発生する可能性があります。

これを防ぐため、JavaScriptを利用した入力チェックは非常に重要です。

適切な入力検証により、アプリケーションの堅牢性を高めることができます。

○JavaScriptとは？

JavaScriptは、ウェブページを動的かつインタラクティブにするための主要なプログラミング言語です。

HTMLとCSSで構築されたウェブページに、動的な要素やアニメーション、さらにはデータ検証機能を付加することが可能です。

入力チェックの実装においても、JavaScriptは欠かせないツールとして機能します。

●入力チェックの方法

ここでは、JavaScriptを使って入力チェックを行う基本的な方法をいくつかのサンプルコードとともに紹介します。

○サンプルコード1：必須項目チェック

必須項目が入力されているかどうかをチェックする方法です。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>必須項目チェック</title>
<script>
function checkRequired() {
  var input = document.getElementById('inputText');
  if (input.value === '') {
    alert('必須項目を入力してください。');
    return false;
  }
  return true;
}
</script>
</head>
<body>
<form onsubmit="return checkRequired();">
  <label for="inputText">必須項目：</label>
  <input type="text" id="inputText" required>
  <input type="submit" value="送信">
</form>
</body>
</html>

上記のサンプルコードでは、checkRequired関数内で、getElementByIdメソッドを使ってinputTextというIDを持つinput要素を取得しています。

次に、取得した要素の値が空（”）であるかどうかをチェックし、空であればアラートを表示しています。

このチェックが成功すると、フォームの送信が実行されます。

○サンプルコード2：数値チェック

入力された値が数値であるかをチェックする方法です。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>数値チェック</title>
<script>
// 数値チェック関数
function checkNumber() {
  var input = document.getElementById('inputNumber');
  // 入力値が数値でない場合、アラートを表示
  if (isNaN(input.value)) {
    alert('数値を入力してください。');
    return false;
  }
  return true;
}
</script>
</head>
<body>
<form onsubmit="return checkNumber();">
  <label for="inputNumber">数値：</label>
  <input type="text" id="inputNumber">
  <input type="submit" value="送信">
</form>
</body>
</html>

上記のサンプルコードでは、checkNumber関数内で、getElementByIdメソッドを使ってinputNumberというIDを持つinput要素を取得しています。

次に、isNaN関数を使って入力値が数値でないかどうかをチェックし、数値でなければアラートを表示しています。

このチェックが成功すると、フォームの送信が実行されます。

○サンプルコード3：メールアドレスチェック

入力された値がメールアドレスの形式になっているかをチェックする方法です。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>メールアドレスチェック</title>
<script>
// メールアドレスチェック関数
function checkEmail() {
  var input = document.getElementById('inputEmail');
  // メールアドレスの正規表現パターン
  var pattern = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;
  // 入力値がメールアドレスの形式でない場合、アラートを表示
  if (!pattern.test(input.value)) {
    alert('正しいメールアドレスを入力してください。');
    return false;
  }
  return true;
}
</script>
</head>
<body>
<form onsubmit="return checkEmail();">
  <label for="inputEmail">メールアドレス：</label>
  <input type="text" id="inputEmail">
  <input type="submit" value="送信">
</form>
</body>
</html>

上記のサンプルコードでは、checkEmail関数内で、getElementByIdメソッドを使ってinputEmailというIDを持つinput要素を取得しています。

次に、正規表現を使って入力値がメールアドレスの形式であるかどうかをチェックし、形式が正しくなければアラートを表示しています。

このチェックが成功すると、フォームの送信が実行されます。

○サンプルコード4：パスワード強度チェック

パスワードの強度をチェックする方法です。

大文字、小文字、数字、特殊文字の組み合わせなどを考慮したチェックが行われます。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>パスワード強度チェック</title>
<script>
// パスワード強度チェック関数
function checkPasswordStrength() {
  var input = document.getElementById('inputPassword');
  var strength = 0;

  // 大文字、小文字、数字、特殊文字を含む正規表現パターン
  var patterns = [
    /[A-Z]/, // 大文字
    /[a-z]/, // 小文字
    /[0-9]/, // 数字
    /[^A-Za-z0-9]/ // 特殊文字
  ];

  // 各パターンにマッチするかチェックし、マッチする場合はstrengthを1増やす
  patterns.forEach(function (pattern) {
    if (pattern.test(input.value)) {
      strength++;
    }
  });

  // strengthの値に応じてアラートを表示
  if (strength < 3) {
    alert('パスワード強度が低いです。大文字、小文字、数字、特殊文字を組み合わせてください。');
    return false;
  }
  return true;
}
</script>
</head>
<body>
<form onsubmit="return checkPasswordStrength();">
  <label for="inputPassword">パスワード：</label>
  <input type="password" id="inputPassword">
  <input type="submit" value="送信">
</form>
</body>
</html>

上記のサンプルコードでは、checkPasswordStrength関数内で、getElementByIdメソッドを使ってinputPasswordというIDを持つinput要素を取得しています。

次に、正規表現を使って入力値が大文字、小文字、数字、特殊文字をそれぞれ含んでいるかどうかをチェックし、含んでいる場合はstrengthを1増やします。

最後に、strengthの値に応じてアラートを表示しています。

このチェックが成功すると、フォームの送信が実行されます。

○サンプルコード5：日付形式チェック

入力された日付が正しい形式（例：YYYY/MM/DD）であるかどうかをチェックする方法です。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>日付形式チェック</title>
<script>
// 日付形式チェック関数
function checkDateFormat() {
  var inputDate = document.getElementById('inputDate');
  var pattern = /^\d{4}\/\d{2}\/\d{2}$/;

  if (!pattern.test(inputDate.value)) {
    alert('日付形式が正しくありません。YYYY/MM/DD形式で入力してください。');
    return false;
  }
  return true;
}
</script>
</head>
<body>
<form onsubmit="return checkDateFormat();">
  <label for="inputDate">日付：</label>
  <input type="text" id="inputDate">
  <input type="submit" value="送信">
</form>
</body>
</html>

このサンプルコードでは、checkDateFormat関数内で、getElementByIdメソッドを使ってinputDateというIDを持つinput要素を取得しています。

次に、正規表現を使って入力値がYYYY/MM/DD形式になっているかどうかをチェックし、形式が正しくない場合はアラートを表示します。

このチェックが成功すると、フォームの送信が実行されます。

●入力チェックの応用例

入力チェックをより効果的に活用するためのいくつかの応用例を紹介します。

○サンプルコード6：リアルタイム入力チェック

リアルタイムで入力値のチェックを行い、ユーザーにエラーを即時に通知する方法です。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>リアルタイム入力チェック</title>
<script>
// リアルタイムチェック関数
function checkInputRealTime(inputElement, errorMessageElement) {
  var pattern = /^[a-zA-Z0-9]+$/;
  if (!pattern.test(inputElement.value)) {
    errorMessageElement.textContent = '半角英数字のみ入力してください。';
  } else {
    errorMessageElement.textContent = '';
  }
}
</script>
</head>
<body>
<form>
  <label for="inputText">半角英数字：</label>
  <input type="text" id="inputText" oninput="checkInputRealTime(this, document.getElementById('errorMessage'));">
  <span id="errorMessage" style="color:red"></span>
</form>
</body>
</html>

このサンプルコードでは、半角英数字の入力チェックをリアルタイムで行っています。

oninputイベントを使って、入力内容が変更される度にチェック関数checkInputRealTimeを呼び出します。

エラーメッセージはerrorMessageというIDを持つspan要素に表示されます。

○サンプルコード7：複数項目の一括チェック

フォーム内の複数の項目を一度にチェックする方法です。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>複数項目の一括チェック</title>
<script>
// 一括チェック関数
function checkAllInputs() {
  // 各項目のチェック関数を呼び出し、結果を配列に格納
  var results = [
    checkRequired(document.getElementById('requiredInput')),
    checkEmailFormat(document.getElementById('emailInput')),
    checkDateFormat(document.getElementById('dateInput'))
  ];

  // 配列内の結果が全てtrueであれば送信を許可
  return results.every(result => result);
}
</script>
</head>
<body>
<form onsubmit="return checkAllInputs();">
  <!-- 必須項目チェック、メールアドレスチェック、日付形式チェックの各input要素 -->
  <!-- 各チェック関数はサンプルコード1, 3, 5で示したものを使用 -->
</form>
</body>
</html>

○サンプルコード8：カスタムエラーメッセージ

HTML5の標準エラーメッセージではなく、独自のエラーメッセージを表示する方法です。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>カスタムエラーメッセージ</title>
<style>
  .error-message {
    color: red;
    display: none;
  }
</style>
<script>
// 必須項目チェック関数
function checkRequired(inputElement, errorMessageElement) {
  if (inputElement.value === '') {
    errorMessageElement.textContent = '入力が必須です。';
    errorMessageElement.style.display = 'block';
    return false;
  } else {
    errorMessageElement.style.display = 'none';
    return true;
  }
}

// 送信ボタン押下時の処理
function onSubmit() {
  var inputElement = document.getElementById('requiredInput');
  var errorMessageElement = document.getElementById('errorMessage');
  
  // 必須項目チェック
  if (!checkRequired(inputElement, errorMessageElement)) {
    return false;
  }
  
  return true;
}
</script>
</head>
<body>
<form onsubmit="return onSubmit();">
  <label for="requiredInput">必須項目：</label>
  <input type="text" id="requiredInput">
  <span id="errorMessage" class="error-message"></span>
  <button type="submit">送信</button>
</form>
</body>
</html>

このサンプルコードでは、カスタムエラーメッセージを表示するためにcheckRequired関数を使用しています。

エラーメッセージは、displayスタイルを変更することで表示・非表示を切り替えています。

○サンプルコード9：入力チェックの無効化

HTML5の標準入力チェックを無効化する方法です。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>入力チェックの無効化</title>
</head>
<body>
<form novalidate>
  <label for="email">メールアドレス：</label>
  <input type="email" id="email" required>
  <button type="submit">送信</button>
</form>
</body>
</html>

このサンプルコードでは、novalidate属性をフォーム要素に追加することで、HTML5の標準入力チェックを無効化しています。

○サンプルコード10：Ajaxを使ったサーバーサイドチェック

JavaScriptのAjaxを使って、サーバーサイドで入力チェックを行う方法です。

※ サーバーサイドの実装例は省略しています。このコードはクライアントサイドのみを示しています。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Ajaxを使ったサーバーサイドチェック</title>
<script>
// Ajaxでサーバーサイドチェックを実行
async function checkServerSide(inputElement) {
  const response = await fetch('サーバーサイドのURL', {
    method: 'POST',
    body: JSON.stringify({ inputValue: inputElement.value }),
    headers: { 'Content-Type': 'application/json' }
  });

  const result = await response.json();

  if (result.valid) {
    alert('入力内容が正常です');
  } else {
    alert('入力内容に問題があります: ' + result.message);
  }
}

// 送信ボタン押下時の処理
function onSubmit(event) {
  event.preventDefault();
  const inputElement = document.getElementById('inputValue');
  checkServerSide(inputElement);
}
</script>
</head>
<body>
<form onsubmit="onSubmit(event);">
  <label for="inputValue">入力：</label>
  <input type="text" id="inputValue">
  <button type="submit">送信</button>
</form>
</body>
</html>

このサンプルコードでは、checkServerSide関数を使用してAjaxリクエストを送信し、サーバーサイドで入力チェックを実行しています。

onSubmit関数はフォーム送信時に呼び出され、event.preventDefault()で通常の送信をキャンセルし、代わりにAjaxリクエストを実行します。

●注意点と対処法

クライアントサイドの入力チェックは、JavaScriptを無効化したりブラウザの開発者ツールを使って回避される可能性があります。
重要なチェックはサーバーサイドでも実施してください。
入力チェックに正規表現を使用する場合は、特殊な文字やエスケープ処理に注意してください。
誤った正規表現を使用すると、意図しない入力を許可してしまう可能性があります。