🔐 id,pw入力時にログインボタンを有効にする

  로그인, 회원가입과 같은 입력폼 페이지에서 데이터가 모두 입력되면
  하단 확인(다음,제출 등)버튼이 비활성화였다가 활성화되는 기능을 프론트에서 스크립트로 구현해보고자 한다. 
  복잡한 입력폼 페이지를 접하기 전에 간단한 로그인 페이지에서 먼저 구현 해보고자 한다.

🌟目標実装機能

1.id、pwの値がtrueの場合、ボタンがアクティブになります。

2.idとpwの両方の値が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.ブール関数を使用します。

let idCheck = false;
let pwCheck = false;

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

pushValue();

コードが長くなります.

一度にアクティブ化されたボタンは、再び無効になりません.

2.pw入力ボックス値をtrueとした場合、アクティビティを与えます。

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

pushValue();

コードが簡潔になります.

pw入力値を基準に問題が発生.

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を入力すると、「10179142」ボタンが有効になります.
pwを入力すると無効になるボタン

最終実施結果

デザインが単調すぎるため、「KakaoTalkログイン」画面を参照してください.😅
有効性チェックは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