JavaScript - フォームバリデーション：ビギナーズガイド

こんにちは、未来のプログラマーさんたち！今日は、JavaScriptのフォームバリデーションのエキサイティングな世界に飛び込みます。プログラミングを教えてきた年数を振り返ると、これは最も実用的で重要なスキルの1つだと言えます。それでは、始めましょう！

JavaScript - Validations

フォームバリデーションとは？

コードに飛び込む前に、フォームバリデーションとは何か、そしてなぜそれが重要かを理解しましょう。オンラインでピザを注文するフォームを埋めているとします。間違って1000個のピザを注文してしまうなんて、嫌ですよね？それがフォームバリデーションの役割です。ユーザーが入力したデータが正しいかどうか、適切な形式かどうかを確認します。

基本的なフォームバリデーション

1. フィールドが空かどうかを確認する

最も基本的なバリデーションから始めましょう。フィールドが空かどうかを確認します。以下は簡単な例です：

function validateForm() {
let x = document.forms["myForm"]["fname"].value;
if (x == "") {
alert("名前を入力してください");
return false;
}
}

このコードでは：

「fname」という名前のフィールドの値を取得しています。
値が空（空の文字列）の場合、アラートを表示し、falseを返します。これによりフォームが送信されるのを防ぎます。

2. 数値入力をバリデーションする

次に、フィールドが数値のみを含むか確認します：

function validateNumber() {
let x = document.getElementById("myNumber").value;
if (isNaN(x) || x < 1 || x > 100) {
alert("入力が無効です");
return false;
}
}

ここで起こっていることは：

「myNumber」というIDの入力フィールドの値を取得します。
isNaN()を使用して数値でないか確認し、1から100の範囲内か確認します。
いずれかの条件がtrueの場合、アラートを表示し、falseを返します。

データ形式のバリデーション

1. メールアドレスのバリデーション

最も一般的なバリデーションの1つは、メールアドレスが正しい形式か確認することです。以下のようにやります：

function validateEmail() {
let email = document.getElementById("myEmail").value;
let regex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
if (!regex.test(email)) {
alert("有効なメールアドレスを入力してください");
return false;
}
}

これは少し複雑に見えますが、以下のように分解できます：

正規表現（regex）を使用してメール形式を確認します。
正規表現は以下を確認します：
スペースや@でない文字列
@記号
スペースや@でない文字列
ドット
スペースや@でない文字列

2. 日付のバリデーション

日付がMM/DD/YYYYの形式にあることを確認しましょう：

function validateDate() {
let date = document.getElementById("myDate").value;
let regex = /^(0[1-9]|1[0-2])\/(0[1-9]|[12][0-9]|3[01])\/\d{4}$/;
if (!regex.test(date)) {
alert("MM/DD/YYYY形式で有効な日付を入力してください");
return false;
}
}

この正規表現はさらに複雑ですが、以下を確認しています：

月（01-12）
ドット
日（01-31）
ドット
4桁の年

ただし、この正規表現は形式を確認するだけで、実際の日付の有効性（例えば2月30日）を確認しません。

すべてを合わせる

個別のバリデーションを見たので、これらを1つのフォームにまとめます：

<form name="myForm" onsubmit="return validateForm()">
名前: <input type="text" name="fname"><br>
年齢: <input type="text" id="myNumber"><br>
メール: <input type="text" id="myEmail"><br>
日付: <input type="text" id="myDate"><br>
<input type="submit" value="送信">
</form>

<script>
function validateForm() {
if (!validateName() || !validateNumber() || !validateEmail() || !validateDate()) {
return false;
}
return true;
}

function validateName() {
let x = document.forms["myForm"]["fname"].value;
if (x == "") {
alert("名前を入力してください");
return false;
}
return true;
}

function validateNumber() {
let x = document.getElementById("myNumber").value;
if (isNaN(x) || x < 1 || x > 100) {
alert("年齢は1から100の数値で入力してください");
return false;
}
return true;
}

function validateEmail() {
let email = document.getElementById("myEmail").value;
let regex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
if (!regex.test(email)) {
alert("有効なメールアドレスを入力してください");
return false;
}
return true;
}

function validateDate() {
let date = document.getElementById("myDate").value;
let regex = /^(0[1-9]|1[0-2])\/(0[1-9]|[12][0-9]|3[01])\/\d{4}$/;
if (!regex.test(date)) {
alert("MM/DD/YYYY形式で有効な日付を入力してください");
return false;
}
return true;
}
</script>

この完全な例では：

名前、年齢、メール、日付のフィールドがあるフォームがあります。
フォームの「onsubmit」イベントは「validateForm()」を呼び出します。
「validateForm()」はすべての個別のバリデーション関数を呼び出します。
いずれかのバリデーションが失敗すると、フォームの送信が阻止されます。

結論

おめでとうございます！JavaScriptのフォームバリデーションの基本を学びました。バリデーションはエラーを防ぐだけでなく、より良いユーザー体験を作ることでもあります。プログラミングの旅を続ける中で、フォームをさらにユーザー友善的にする多くの方法を見つけるでしょう。プラクティスを続けて、フォームバリデーションの達人になるまでに進んでください！素晴らしいプログラマーは皆、あなたが今いる場所から始めました。ハッピーコーディング！

以下に、カバーしたバリデーションメソッドの表を示します：

メソッド	目的	例
空フィールドチェック	必須フィールドが記入されているか確認	`if (x == "")`
数値バリデーション	入力が数値であり、指定された範囲内か確認	`if (isNaN(x) \|\| x < 1 \|\| x > 100)`
メールバリデーション	メールアドレスの形式を確認	`if (!regex.test(email))`
日付形式バリデーション	日付が指定された形式にあるか確認	`if (!regex.test(date))`

プラクティスを続けて、すぐにフォームバリデーションの達人になれるでしょう！

Credits: Image by storyset