[JSアプリケーション]会員登録ページの作成

48343 ワード
JavaScript CSS 会員収入 検証＃ケンショウ＃ フォームタグ html テキストリンク
🖍 HTML、CSS、JSを使って会員登録ページを作成する-機能がメインで、cssは簡単なはずです!

🔴 HTML、CSSの使用


🟠 HTML - join.html

<body>
  <form name="join_form" action="" method="get" id="jaoin_form" onsubmit="return form_check()">
    <fieldset>
      <legend>회원가입</legend>
      <p>
        <label for="u_name">이름</label>
        <input type="text" name="u_name" id="u_name">
        <br>
        <span class="err_name"></span>
      </p>
      <p>
        <label for="u_id">아이디</label>
        <input type="text" name="u_id" id="u_id">
        <button type="button">아이디 중복확인</button> 
        <br>
        <span class="err_id">* 4~12글자까지만 입력 가능합니다.</span>
      </p>
      <p>
        <label for="pwd">비밀번호</label>
        <input type="text" name="pwd" id="pwd"> 
        <br>
        <span class="err_pwd">* 4~12글자까지만 입력 가능합니다.</span>
      </p>
      <p>
        <label for="repwd">비밀번호 확인</label>
        <input type="text" name="repwd" id="repwd">
        <br>
        <span class="err_repwd"></span>
      </p>
      <p>
        <label for="birth">생년월일</label>
        <input type="text" name="birth" id="birth">
        <br>
        <span class="err_birth">* ex)19700101 - 8자리로 입력</span>
      </p>
      <p>
        <label for="postalCode">주소검색</label>
        <input type="text" name="postalCode" id="postalCode" placeholder="우편번호">
        <button type="button">주소검색</button> <br>
        <label for="addr1">주소</label>
        <input type="text" name="addr1" id="addr1" placeholder="기본주소">
        <label for="addr2"></label>
        <input type="text" name="addr2" id="addr2" placeholder="상세주소">
      </p>
      <p>
        <label for="email_id">이메일</label>
        <input type="text" name="email_id" id="email_id"> @
        <input type="text" name="email_dns" id="email_dns">
        <select name="email_sel" id="email_sel">
          <option value="">직접 입력</option>
          <option value="naver.com">NAVER</option>
          <option value="hanmail.net">DAUM</option>
          <option value="gmail.com">GOOGLE</option>
        </select>
      </p>
      <p>
        <label for="mobile">전화번호</label>
        <input type="text" name="mobile" id="mobile">
        <br>
        <span class="err_mobile">* '-'없이 숫자만 입력</span>
      </p>
      <p>
        <input type="checkbox" name="agree" id="agree">
        <label for="agree">약관 동의</label>
        <br>
        <span class="err_agree">* 필수</span>
      </p>
      <p class="final_btn">
        <button type="button" class="btn">이전으로</button>
        <button type="submit" class="btn">회원가입</button>
      </p>
    </fieldset>
  </form>
  <script src="join.js" type="text/javascript"></script>
</body>
  • onsubmit="return form_check()"
  • onsubmit:フォームタグでフォーム転送を検証する前にデータを入力するイベント.
  • submitはsubmitをクリックして行い、onsubmit="return false"はsubmitを行わない.

    • 🟡 CSS:内部スタイルシート-join。html

      <style type="text/css">
    form {
      width: 600px;
      margin: auto;
    }
    form legend {
      font-size: 20px;
      text-align: center;
    }
    form p span {
      font-size: 13px;
      color: rgb(0, 60, 255);
      font-style: italic;
    }
    form .final_btn {
      text-align: center;
    }
  </style>

    🟢 JS:外部スタイルシート(bodyの下部にある)-join。js

    function form_check() { // form요소 submit 전 유효성 검사
  let u_name = document.getElementById("u_name");
  let u_id = document.getElementById("u_id");
  let pwd = document.getElementById("pwd");
  let repwd = document.getElementById("repwd");
  let agree = document.getElementById("agree");
  
  function red_err_txt() { 
    err_txt.style.color = "red";
  }

  if (u_name.value == "") {
    var err_txt = document.querySelector(".err_name");
    red_err_txt();
    err_txt.textContent = "* 이름을 입력하세요.";
    u_name.focus();
    return false;
  }
  if (u_id.value == "") {
    var err_txt = document.querySelector(".err_id");
    red_err_txt();
    err_txt.textContent = "* 아이디를 입력하세요";
    u_id.focus();
    return false;
  }
  const uid_len = u_id.value.length;
  if (uid_len < 4 || uid_len > 12) {
    var err_txt = document.querySelector(".err_id");
    red_err_txt();
    err_txt.textContent = "* 4~12글자까지만 입력 가능합니다.";
    u_id.focus();
    return false;
  }
  if (pwd.value == "") {
    var err_txt = document.querySelector(".err_pwd");
    red_err_txt();
    err_txt.textContent = "* 비밀번호를 입력하세요";
    pwd.focus();
    return false;
  }
  var pwd_len = pwd.value.length;
  if (pwd_len < 4 || pwd_len > 12) {
    var err_txt = document.querySelector(".err_pwd");
    red_err_txt();
    err_txt.textContent = "* 4~12글자까지만 입력 가능합니다.";
    pwd.focus();
    return false;
  }
  if (pwd.value != repwd.value) {
    var err_txt = document.querySelector(".err_repwd");
    red_err_txt();
    err_txt.textContent = "* 비밀번호를 확인해주세요.";
    repwd.focus();
    return false;
  }
  if (!agree.checked) {
    alert("약관 동의가 필요합니다.");
    agree.focus();
    return false;
  }
}
  • 角if文が最後にreturn false;と書かれたのは、戻り値がfalse(検証に適していない)の場合、コミットされないためです.
  • 検証項目は次のとおりです.
  • 名称、身分、パスワード、パスワードの確認、受け入れ条項と条件の

    • 🔵 詳細は私のgithubを参照してください

    明日学習キャンプ54日目TIL
    Hexoブログ記事トップ機能追加