【JavaScript】フォームの入力内容を確かめる｜制御構文・正規表現・例外処理を使った処理

JavaScript(ジャバスクリプト)

2023.06.16

この記事は約2分で読めます。

JavaScriptを使用して、フォームの入力内容を確認する方法について説明します。

制御構文（入力欄が空欄かどうか）
正規表現（メールアドレスの形式かどうか）
例外処理（数字以外の文字列が入力されたかどうか）
まとめ

制御構文（入力欄が空欄かどうか）

まず、制御構文を使用して、入力された値が適切かどうかを確認します。

以下は、例として、フォームの入力欄が空欄でないことを確認する方法です。

const input = document.querySelector('#inputField').value;

if (input === '') {
  alert('入力してください。');
} else {
  // 入力された値が適切な場合の処理
}

正規表現（メールアドレスの形式かどうか）

次に、正規表現を使用して、入力された値が特定の形式に適合しているかどうかを確認します。

例えば、メールアドレスの入力欄に入力された値が、メールアドレスの形式に適合しているかどうかを確認する場合、以下のようなコードが使用できます。

const email = document.querySelector('#emailField').value;
const emailPattern = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;

if (!emailPattern.test(email)) {
  alert('正しいメールアドレスを入力してください。');
} else {
  // 入力された値が適切な場合の処理
}

例外処理（数字以外の文字列が入力されたかどうか）

また、例外処理を使用して、入力された値が適切かどうかを確認することもできます。

例えば、フォームの入力欄に数字以外の文字列が入力された場合に、エラーメッセージを表示するには以下のようにします。

const number = document.querySelector('#numberField').value;

try {
  if (isNaN(number)) throw new Error('数字を入力してください。');
  // 入力された値が適切な場合の処理
} catch (error) {
  alert(error.message);
}

以上のように、制御構文、正規表現、例外処理などを使用して、フォームの入力内容を確認することができます。