記事タイトル１

KK_2024 
// HTMLのフォーム要素を取得
const form = document.getElementById("input-form");
// 送信ボタンを取得
const submitButton = document.getElementById("submit");
// 各入力フィールドを取得
const fullName = document.getElementById("fullName");
const email = document.getElementById("email");
const phoneNumber = document.getElementById("phoneNumber");
const password = document.getElementById("password");
const checkPassword = document.getElementById("checkPassword");

// フォームが送信されたときのイベントリスナーを追加
form.addEventListener("submit", (e) => {
  e.preventDefault(); // デフォルトの送信動作をキャンセル
  const name ="こんにちは。。。。。。。";
  if (checkInput()) {
    const formData = new FormData(form); // フォームデータを取得
    const params = new URLSearchParams(formData); // クエリ文字列を作成
    window.location.href = "outputForm.html?" + params.toString(); // リダイレクト
  }
});


// フォームの入力をチェックする関数
function checkInput() {
  // 各入力値を取得
  const fullNameValue = fullName.value.trim();
  const emailValue = email.value.trim();
  const phoneNumberValue = phoneNumber.value.trim();
  const passwordValue = password.value.trim();
  const checkPasswordValue = checkPassword.value.trim();
  let flag = true;

  // 名前のバリデーション
  if (fullNameValue === "") {
    setErrorMessage(fullName, "入力されていません。");
    flag = false;
  } else if (fullNameValue.length < 4 || fullNameValue.length > 50) {
    setErrorMessage(fullName, "入力範囲のエラーです。");
    flag = false;
  } else {
    setSuccessMessage(fullName);
    flag = true;
  }

  // メールアドレスのバリデーション
  if (emailValue === "") {
    setErrorMessage(email, "入力されていません。");
    flag = false;
  } else if (!isValidateEmail(emailValue)) {
    setErrorMessage(email, "有効なメールアドレスではありません。");
    flag = false;
  } else {
    setSuccessMessage(email);
    flag = true;
  }

  // 電話番号のバリデーション
  if (phoneNumberValue === "") {
    setErrorMessage(phoneNumber, "入力されていません。");
    flag = false;
  } else if (phoneNumberValue.length > 11) {
    setErrorMessage(phoneNumber, "有効な電話番号ではありません。");
    flag = false;
  } else {
    setSuccessMessage(phoneNumber);
    flag = true;
  }

  // パスワードのバリデーション
  if (passwordValue === "") {
    setErrorMessage(password, "入力されていません");
    flag = false;
  } else if (passwordValue.length < 6 || passwordValue.length > 20) {
    setErrorMessage(password, "6桁から20桁の範囲で入力してください。");
    flag = false;
  } else {
    setSuccessMessage(password);
    flag = true;
  }

  // 確認用パスワードのバリデーション
  if (checkPasswordValue === "") {
    setErrorMessage(checkPassword, "入力されていません。");
    flag = false;
  } else if (checkPasswordValue.length < 6 || checkPasswordValue.length > 20) {
    setErrorMessage(checkPassword, "6桁から20桁の範囲で入力してください。");
    flag = false;
  } else if (passwordValue !== checkPasswordValue) {
    setErrorMessage(checkPassword, "パスワードが一致していません。");
    flag = false;
  } else {
    setSuccessMessage(checkPassword);
    flag = true;
  }

  return flag;
}

// エラーメッセージを設定する関数
function setErrorMessage(input, message) {
  const formControl = input.parentElement; // 入力フィールドの親要素を取得
  const small = formControl.querySelector("small"); // 親要素からsmall要素を取得
  small.innerText = message; // small要素にエラーメッセージをセット
  formControl.className = "form-control error"; // エラークラスを追加
}

// 入力成功時のメッセージを表示する関数
function setSuccessMessage(input) {
  const formControl = input.parentElement; // 入力フィールドの親要素を取得
  formControl.className = "form-control success"; // 成功クラスを追加
}

// ユーザー名のバリデーションチェック
function isUserNameValid(username) {
  const res = /^[a-z0-9_\.]+$/.exec(username);
  const valid = !!res;
  return valid;
}

// メールアドレスのバリデーションチェック
function isValidateEmail(email) {
  const re = /.+@.+\..+/;
  return re.test(email);
}



<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h2>こんにちは！</h2>
    <script>
        // URLからクエリ文字列を取得
const queryString = window.location.search;
// URLSearchParamsオブジェクトを使用してクエリ文字列を解析
const urlParams = new URLSearchParams(queryString);

// 各パラメータを取得
const fullName = urlParams.get('fullName');
const email = urlParams.get('email');
const phoneNumber = urlParams.get('phoneNumber');
const dataOfBirth = urlParams.get('dataOfBirth');
const userBio = urlParams.get('userBio');
const password = urlParams.get('password');
const checkPassword = urlParams.get('checkPassword');

// 各パラメータの値をログに出力
console.log('fullName:', fullName);
console.log('email:', email);
console.log('phoneNumber:', phoneNumber);
console.log('dataOfBirth:', dataOfBirth);
console.log('userBio:', userBio);
console.log('password:', password);
console.log('checkPassword:', checkPassword);

    </script>
</body>
</html>

この記事が気に入ったらサポートをしてみませんか？