JavaScriptを使用したパスワードの一致確認とフォームの送信

方法1: イベントリスナーを使用してパスワードの一致確認を行う

<form id="myForm">
  <input type="password" id="password" placeholder="パスワード">
  <input type="password" id="confirmPassword" placeholder="パスワードの確認">
  <button type="submit">送信</button>
</form>
<script>
  const form = document.getElementById("myForm");
  const passwordInput = document.getElementById("password");
  const confirmPasswordInput = document.getElementById("confirmPassword");
  form.addEventListener("submit", (event) => {
    event.preventDefault(); // フォームのデフォルトの送信をキャンセル
    const password = passwordInput.value;
    const confirmPassword = confirmPasswordInput.value;
    if (password !== confirmPassword) {
      alert("パスワードが一致しません");
    } else {
      form.submit(); // パスワードが一致していればフォームを送信
    }
  });
</script>

方法2: パスワードの一致確認を関数に分離する

<form id="myForm">
  <input type="password" id="password" placeholder="パスワード">
  <input type="password" id="confirmPassword" placeholder="パスワードの確認">
  <button type="submit" onclick="checkPassword()">送信</button>
</form>
<script>
  function checkPassword() {
    const password = document.getElementById("password").value;
    const confirmPassword = document.getElementById("confirmPassword").value;
    if (password !== confirmPassword) {
      alert("パスワードが一致しません");
      return false; // フォームの送信をキャンセル
    }
    return true; // パスワードが一致していればフォームを送信
  }
</script>

これらの方法を使用すると、ユーザーが入力したパスワードと確認用パスワードが一致しない場合にエラーメッセージを表示し、一致している場合にはフォームを送信することができます。適切な方法を選んで実装してみてください。