๐Ÿ” id,pw ์ž…๋ ฅ ์‹œ ๋กœ๊ทธ์ธ ๋ฒ„ํŠผ ํ™œ์„ฑํ™” ํ•˜๊ธฐ

20462 ๋‹จ์–ด JavaScriptTILJavaScript
  ๋กœ๊ทธ์ธ, ํšŒ์›๊ฐ€์ž…๊ณผ ๊ฐ™์€ ์ž…๋ ฅํผ ํŽ˜์ด์ง€์—์„œ ๋ฐ์ดํ„ฐ๊ฐ€ ๋ชจ๋‘ ์ž…๋ ฅ๋˜๋ฉด
  ํ•˜๋‹จ ํ™•์ธ(๋‹ค์Œ,์ œ์ถœ ๋“ฑ)๋ฒ„ํŠผ์ด ๋น„ํ™œ์„ฑํ™”์˜€๋‹ค๊ฐ€ ํ™œ์„ฑํ™”๋˜๋Š” ๊ธฐ๋Šฅ์„ ํ”„๋ก ํŠธ์—์„œ ์Šคํฌ๋ฆฝํŠธ๋กœ ๊ตฌํ˜„ํ•ด๋ณด๊ณ ์ž ํ•œ๋‹ค. 
  ๋ณต์žกํ•œ ์ž…๋ ฅํผ ํŽ˜์ด์ง€๋ฅผ ์ ‘ํ•˜๊ธฐ ์ „์— ๊ฐ„๋‹จํ•œ ๋กœ๊ทธ์ธ ํŽ˜์ด์ง€์—์„œ ๋จผ์ € ๊ตฌํ˜„ ํ•ด๋ณด๊ณ ์ž ํ•œ๋‹ค.

๐ŸŒŸ๋ชฉํ‘œ ๊ตฌํ˜„ ๊ธฐ๋Šฅ

1. id,pw์˜ value๊ฐ’์ด ๋ชจ๋‘ true๋ฉด ๋ฒ„ํŠผ ํ™œ์„ฑํ™” ์‹œ์ผœ์ค€๋‹ค.

2. id,pw์˜ value๊ฐ’์ด ๋‘˜ ์ค‘ ํ•˜๋‚˜๋ผ๋„ false๋ฉด ๋ฒ„ํŠผ ๋น„ํ™œ์„ฑํ™” ์ฒ˜๋ฆฌํ•ด์ค€๋‹ค.


โœ…๊ตฌํ˜„ ๋ฐฉ๋ฒ•

  • html ๊ตฌ์กฐ
<section class="contents login_contents">
        <div class="container">
            <!-- ์œ ํšจ์„ฑ ๊ฒ€์‚ฌ form_wrap_line ์— error ์ถ”๊ฐ€ -->
            <div class="form_wrap_line login_top">
                <div class="form-group-wrap">
                    <div class="form-group">
                        <input type="text" id="user_id" class="form-control box" placeholder="์นด์นด์˜ค๊ณ„์ •" title="์นด์นด์˜ค๊ณ„์ •">
                    </div>
                    <div class="form-group">
                        <input type="password" id="user_pw" class="form-control box" placeholder="๋น„๋ฐ€๋ฒˆํ˜ธ" title="๋น„๋ฐ€๋ฒˆํ˜ธ">
                    </div>
                </div>
                <div class="btn-group">
                    <button type="button" id="btn_login" class="btn btn_lg btn_primary" disabled>๋กœ๊ทธ์ธ</button>
                </div>
                <p class="caution">์นด์นด์˜ค๊ณ„์ • ๋˜๋Š” ๋น„๋ฐ€๋ฒˆํ˜ธ๋ฅผ ๋‹ค์‹œ ํ™•์ธํ•ด์ฃผ์„ธ์š”</p>
            </div>
            <div class="btn-login-util">
                <button type="button" class="btn_find_id">์นด์นด์˜ค๊ณ„์ • ์ฐพ๊ธฐ</button>
                <button type="button" class="btn_find_pw">๋น„๋ฐ€๋ฒˆํ˜ธ ์žฌ์„ค์ •</button>
            </div>
        </div>
</section>

  • ๊ณตํ†ต ๋ณ€์ˆ˜ ์„ ์–ธ
const formWrap = document.querySelector('.form_wrap_line');
const idForm = document.querySelector('#user_id');
const pwForm = document.querySelector('#user_pw');
const loginButton = document.querySelector('#btn_login');

1. booleanํ•จ์ˆ˜๋ฅผ ์ด์šฉํ•œ๋‹ค.


let idCheck = false;
let pwCheck = false;

const pushValue = () => {
  idForm.addEventListener('keyup', () => {
    idCheck = true
  });
  
  pwForm.addEventListener('keyup', () => {
    pwCheck = true
  });
}

pushValue();
  • ์ฝ”๋“œ๊ฐ€ ๊ธธ์–ด์ง„๋‹ค.
  • ํ•œ๋ฒˆ ํ™œ์„ฑํ™”๋œ ๋ฒ„ํŠผ์ด ๋‹ค์‹œ ๋น„ํ™œ์„ฑํ™”๋กœ ๋Œ์•„๊ฐ€์ง€ ์•Š๋Š”๋‹ค.

2. pw ์ธํ’‹๋ฐ•์Šค value๊ฐ’์„ ๊ธฐ์ค€์œผ๋กœ true๊ฐ€ ๋˜๋ฉด, ์ด๋ฒคํŠธ๋ฅผ ์ค€๋‹ค.


const pushValue () => {
  pwForm.addEventListener('keyup', () => {
    if(idForm.value && pwForm.value){
      loginButton.disabled = false;
    } else {
      loginButton.disabled = true;
    }
  });
}

pushValue();
  • ์ฝ”๋“œ๊ฐ€ ๊ฐ„๊ฒฐํ•ด์ง„๋‹ค.
  • pw input value๊ฐ’์„ ๊ธฐ์ค€์œผ๋กœ ํ•˜์—ฌ ๋ฌธ์ œ๊ฐ€ ๋ฐœ์ƒํ•œ๋‹ค.
    • id ๊ฐ’์ด ์ง€์›Œ์กŒ์„ ๋•Œ, ๋ฒ„ํŠผ์ด ๋น„ํ™œ์„ฑํ™”๋˜์ง€ ์•Š๋Š”๋‹ค.
    • pw ๊ฐ’์ด ๋จผ์ € ์ž…๋ ฅ๋˜๊ณ , id ๊ฐ’์„ ์ž…๋ ฅํ•˜๋ฉด ๋ฒ„ํŠผ์ด ํ™œ์„ฑํ™”๋˜์ง€ ์•Š๋Š”๋‹ค.

3. ์ด๋ฒคํŠธ ํ•จ์ˆ˜๋ฅผ ๋งŒ๋“ค์–ด์„œ ์ด๋ฒคํŠธ๋ฅผ ๋ถ€์—ฌํ•ด์ค€๋‹ค.

idForm.addEventListener('keyup', activeEvent);
pwForm.addEventListener('keyup', activeEvent);
loginButton.addEventListener('click', errorEvent);

function activeEvent() {
  switch(!(idForm && pwForm)){
    case true : loginButton.disabled = true; break;
    case false : loginButton.disabled = false; break
  }
}

function errorEvent() { // ์ด๊ฑด ๊ทธ๋ƒฅ error ๋ฌธ๊ตฌ ์ถœ๋ ฅํ•ด๋ณด๋ ค๊ณ  ๋งŒ๋“ค์–ด๋ด„.(์‹ ๊ฒฝ์•ˆ์จ๋„๋จ)
    formWrap.classList.add('error');
}
  • id, pw ๊ฐ€ ๋ชจ๋‘ ์ž…๋ ฅ๋์„ ๋•Œ โžก !(true) = false โžก ๋ฒ„ํŠผ ํ™œ์„ฑํ™”
  • id, pw ์ค‘ ํ•˜๋‚˜๋งŒ ์ž…๋ ฅ๋์„ ๋•Œ โžก !(false) = true โžก ๋ฒ„ํŠผ ๋น„ํ™œ์„ฑํ™”



โœจ์ตœ์ข… ๊ตฌํ˜„ ๊ฒฐ๊ณผ

๋””์ž์ธ์ด ์‹ฌ์‹ฌํ•ด์„œ ์นดํ†ก ๋กœ๊ทธ์ธ ํ™”๋ฉด ์ฐธ๊ณ ํ•จ๐Ÿ˜…

์œ ํšจ์„ฑ ๊ฒ€์‚ฌ๋Š” error๋ฌธ๊ตฌ ์ถœ๋ ฅํ•ด๋ณด๋ ค๊ณ  ๊ทธ๋ƒฅ ๋งŒ๋“ค์–ด๋ด„๐Ÿ˜



์ฐธ๊ณ 

https://velog.io/@rain98/TIL-id-pw-%EC%9E%85%EB%A0%A5-%EC%8B%9C-%EB%A1%9C%EA%B7%B8%EC%9D%B8-%EB%B2%84%ED%8A%BC-%ED%99%9C%EC%84%B1%ED%99%94-%EA%B8%B0%EB%8A%A5

https://velog.io/@najiexx/javascript-%EB%A1%9C%EA%B7%B8%EC%9D%B8-%EB%B2%84%ED%8A%BC-%ED%99%9C%EC%84%B1%ED%99%94

https://cocoon1787.tistory.com/700

์ข‹์€ ์›นํŽ˜์ด์ง€ ์ฆ๊ฒจ์ฐพ๊ธฐ