[php][js] 로그인 , 회원가입 페이지에 부가 기능 넣기(비밀 번호 확인, 비밀번호 표시)

목차

1. 로그인 페이지 숨기 체크박스 구현 모습
2. 회원가입 페이지 비밀번호 확인 구현 모습

 

로그인 페이지 숨기 체크박스 구현 모습

비밀번호 표시가 된 모습

 

비밀번호로 안보이게 한 모습

간단한 로그인 폼

php

     <form method="POST" action="../MainPage.php">
                <p>
                <div class="input-wrap">
                    <div class="login-img">𖠌</div>
                    <input type="text" name="Login_id" required />
                </div>
                <p>
                <p>
                <div class="input-wrap">
                    <div class="login-img">🔓︎</div>
                    <input id="pass" type="password" name="Login_pw" required />
                </div>
                <p>
                <p>
                <div class="input-wrap2">
                    <div>
                        <input type="checkbox" id="visible" name="visible" onchange="VisiblePassword(event)">
                        비밀번호 표시
                    </div>
                    <input id="submit" type="submit" value="로그인">
                </div>
                </p>
                <div class="user-add">
                    <div> 회원가입은 <a href="UserAddPage.php">여기</a>서 할 수 있습니다.</div>
                    <img src="../../img/sejongwhite.png" alt="LogoImg">
                </div>
            </form>

 

js파일 구현

javascript

function VisiblePassword(event){
    let passwordField = document.getElementById("pass");
    if (event.target.checked) {
        passwordField.type = "text";
      } else {
        passwordField.type = "password";
      }
}

 

회원가입 페이지 비밀번호 확인 구현 모습

비밀번호가 다를 경우 경고창이 뜨는 모습

 

간단한 회원 가입 폼

php

  <form method="POST" action="">
                <div class="input-wrap">
                    이름
                    <input type="text" name="Login_name" required />
                </div>
                <div class="input-wrap">
                    아이디
                    <input type="text" name="Login_id" required />
                </div>
                <div class="input-wrap2">
                    <div class="pass-wrap">
                        비밀번호
                        <input id="Login_pw" type="password" name="Login_pw" required />
                    </div>
                    <div class="pass-wrap">
                        비밀번호 (확인)
                        <input id="Login_pw_confirm" type="password" name="Login_pw_confirm" required />
                    </div>
                </div>
                <div class=" input-wrap">
                    학교
                    <input type="text" name="User_university" required />
                </div>
                <div class="input-wrap">
                    이메일
                    <input type="text" name="Login_email" required />
                </div>
                <input id="submit" type="submit" name="submit" value="회원가입" onclick="CheckPassword()">

            </form>

 

js파일 구현

javascript

function CheckPassword() {
  let password = document.getElementById("Login_pw").value;
  let confirm_password = document.getElementById("Login_pw_confirm").value;
  if (password.length < 6) {
    alert("비밀번호는 6자 이상이어야 합니다.");
    return false;
  }
  if (password != confirm_password) {
    alert("비밀번호가 일치하지 않습니다.");
    return false;
  } else {
    return true;
  }
}