Reactにおけるパスワード確認のバリデーションページの実装方法

フォームの作成: まず、Reactコンポーネント内でフォームを作成します。パスワードとパスワードの確認の2つの入力フィールドが必要です。

import React, { useState } from 'react';
const PasswordValidationPage = () => {
  const [password, setPassword] = useState('');
  const [confirmPassword, setConfirmPassword] = useState('');
  const handlePasswordChange = (e) => {
    setPassword(e.target.value);
  };
  const handleConfirmPasswordChange = (e) => {
    setConfirmPassword(e.target.value);
  };
  const handleSubmit = (e) => {
    e.preventDefault();
    if (password === confirmPassword) {
      // パスワードが一致する場合の処理
    } else {
      // パスワードが一致しない場合の処理
    }
  };
  return (
    <form onSubmit={handleSubmit}>
      <label>
        パスワード:
        <input type="password" value={password} onChange={handlePasswordChange} />
      </label>
      <br />
      <label>
        パスワードの確認:
        <input type="password" value={confirmPassword} onChange={handleConfirmPasswordChange} />
      </label>
      <br />
      <button type="submit">Submit</button>
    </form>
  );
};
export default PasswordValidationPage;

パスワードのバリデーション: フォームの送信時に、パスワードとパスワードの確認が一致するかどうかを確認します。一致しない場合はエラーメッセージを表示します。

const handleSubmit = (e) => {
  e.preventDefault();
  if (password === confirmPassword) {
    // パスワードが一致する場合の処理
  } else {
    // パスワードが一致しない場合の処理
    alert('パスワードが一致しません');
  }
};

エラーメッセージの表示: パスワードが一致しない場合にエラーメッセージを表示するために、状態変数を追加します。

const [errorMessage, setErrorMessage] = useState('');
const handleSubmit = (e) => {
  e.preventDefault();
  if (password === confirmPassword) {
    // パスワードが一致する場合の処理
  } else {
    // パスワードが一致しない場合の処理
    setErrorMessage('パスワードが一致しません');
  }
};

そして、エラーメッセージを表示する箇所を追加します。

return (
  <form onSubmit={handleSubmit}>
    {/* パスワード入力フィールド */}
    {/* パスワードの確認入力フィールド */}
    {/* 送信ボタン */}
    {errorMessage && <div>{errorMessage}</div>}
  </form>
);

これで、Reactを使用してパスワード確認のバリデーションページを実装する方法がわかりました。必要に応じて、エラーメッセージのスタイリングや追加のバリデーションルールを実装することもできます。