공백 입력 제한(정규표현식) 및 공백 전환 방법

로그인, 아이디 찾기, 비밀번호 찾기, 회원가입

비즈니스 로직(form validation)을 만들 때

내가 제일 신경쓰는 부분은

마지막 텍스트 박스에서 값을 입력하고 나서

enter를 쳤을 때, 버튼

(로그인에서는 로그인 버튼,

아이디 찾기 에서는 아이디 찾기 버튼,

비밀번호 찾기 에서는 비밀번호 변경 버튼,

회원가입 에서는 회원가입 버튼)이

자동으로 클릭 되는 부분이다.

 

내가 다른 웹 사이트에서 사용하면서

편하다고 생각했던 부분이기도 하고

그 기능을 만들어준 개발자에게 고맙다고

생각이 들기도 했기 때문이다.

 

그래서 오늘은

마지막 텍스트 박스에서 엔터치면

다음 인풋으로 focus가 돼는 방법을 배웠고

추가로,

조건에 부합하지 않을 경우

텍스트 박스에 입력 된 값을 모두 지우는

로직도 배웠다.

 

 

먼저 내가 작성한 코드는 이렇다.

// 비밀번호 tbx에서 Enter키를 click하면 로그인 버튼으로 포커스 이동

const ApplyInPwBtn = (e) => {

  if (e.key === "Enter") {

    document.getElementById("idIsLoginBtn").focus();

    // 공백 입력 제한

    const idTbx = document.getElementById("idIsIdTbx").value;

    const pwTbx = document.getElementById("idIsPwTbx").value;

    if (idTbx.includes(" ") || pwTbx.includes(" ")) {

      alert("아이디 혹은 비밀번호를 다시 확인해 주세요");

      document.getElementById("idIsIdTbx").value = "";

      document.getElementById("idIsPwTbx").value = "";

    }

  }

};

독해를 해보면,

1. e.key는 이벤트가 발생했을 때 눌린 키다.

2. 눌린 키를 확인하고 이벤트를 실행한다.

즉, enter키를 눌렀을 경우,

'idIsLoginBtn'(여기에서는 로그인버튼)에

포커스를 준다. 라는 의미이다.

 

// 공백 입력 제한

3. 변수 idTbx에

아이디 텍스트 박스(idIsTbx)값 저장

4. 변수 pwTbx에

비밀번호 텍스트 박스(idIsPwTbx)값 저장

 

5. idTbx나 pwTbx가 공백(" ")을 포함하면

alert ("아이디 혹은 비밀번호를 다시 확인해주세요");

 

6. idIsTbx (아이디 텍스트 박스) 값(value) 공란

7. idIsPwTbx(비밀번호 텍스트 박스) 값(value) 공란