答え合わせ
フォーム検証テストのバグ一覧と解説
バグ1: メールアドレスに@なしでも送信できる
再現手順
- メールアドレス欄に「testmail.com」（@なし）を入力
- 他の項目を適切に入力
- 「登録する」ボタンをクリック
- → エラーにならず送信完了してしまう
なぜバグなのか？
メールアドレスの形式チェック（バリデーション）が実装されていません。 無効なメールアドレスが登録されると、確認メールが届かない、パスワードリセットができないなどの問題が発生します。
バグのあるコード
// メールアドレスのチェックなし
const submitForm = () => {
// パスワードのみチェック
if (form.password.length < 8) {
alert('パスワードは8文字以上');
return;
}
submitted.value = true;
};
正しいコード
const submitForm = () => {
// メールアドレスの形式チェック
const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
if (!emailRegex.test(form.email)) {
alert('有効なメールアドレスを入力してください');
return;
}
// ...
};
バグ2: 電話番号に文字が入力できる
再現手順
- 電話番号欄に「abc123」などの文字を含む値を入力
- 他の項目を適切に入力
- 「登録する」ボタンをクリック
- → エラーにならず送信完了してしまう
なぜバグなのか？
電話番号は数字のみで構成されるべきです。 文字が混入すると、SMS送信やコールバック機能が正しく動作しません。 また、データの整合性も損なわれます。
バグのあるコード
<!-- type="text"で文字も入力可能 -->
<input
type="text"
class="form-control"
v-model="form.phone"
required
>
正しいコード
<!-- type="tel"とパターン指定 -->
<input
type="tel"
class="form-control"
v-model="form.phone"
pattern="[0-9]{10,11}"
required
>
// JS側でも検証
const phoneRegex = /^[0-9]{10,11}$/;
if (!phoneRegex.test(form.phone)) {
alert('電話番号は数字のみ10-11桁');
return;
}
バグ3: 生年月日に未来の日付が設定できる
再現手順
- 生年月日欄に「2030-01-01」などの未来の日付を入力
- 他の項目を適切に入力
- 「登録する」ボタンをクリック
- → エラーにならず送信完了してしまう
なぜバグなのか？
生年月日は過去の日付でなければなりません。 未来の日付が登録されると、年齢計算が負の値になるなど、 様々なロジックに影響を与えます。
バグのあるコード
<!-- max属性なしで未来日付も選択可能 -->
<input
type="date"
class="form-control"
v-model="form.birthday"
required
>
正しいコード
<!-- max属性で今日までに制限 -->
<input
type="date"
class="form-control"
v-model="form.birthday"
:max="today"
required
>
// setup内で
const today = new Date()
.toISOString().split('T')[0];
// さらにJS側でも検証
if (new Date(form.birthday) > new Date()) {
alert('生年月日は過去の日付を選択');
return;
}
学びのポイント
- 多層防御: HTMLの属性（type, pattern, max）とJavaScriptの両方でバリデーションを行う
- サーバーサイド検証: フロントエンドのバリデーションは回避可能なので、サーバーサイドでも必ず検証する
- 境界値テスト: 正常系だけでなく、異常系の入力も必ずテストする
- ユーザー体験: エラーメッセージは具体的で分かりやすいものにする
