로그인 폼 만들기 - 아이디 한글 입력 불가 처리

리액트 전체 링크

프로젝트 전체 링크

 

로그인 폼 만들기

 

- 아이디 한글 입력 불가 처리

- 아이디 저장

- 비밀번호 표시

- Caps Lock 감지

- useReducer로 Input 관리

---

아이디 한글 입력 불가 처리

 

ID input에 특정 문자만 허용하도록 하자.

 

ID의 input은 아래와 같다. onKeyDown은 caps lock 감지에서 설명한다.

<input
  type="text"
  id="email"
  name="email"
  placeholder="NAVER 아이디"
  className="input-id"
  onKeyDown={(e) => checkCapsLock(e)}
  value={loginID}
  onChange={(e) => getLoginID(e)}
/>

 

loginID를 useState로 선언한다. 이 loginID를 ID input에서 사용하고, onChange로 변경한다.

const [loginID, setLoginID] = useState("");

 

단순히 ID를 입력하는 것은 useState와 onChange로 가능하다.

onChange={(e) => setLoginID(e.target.value)}

 

하지만 ID에서 특정 문자만 입력가능하게 하려면 rule check을 해야 한다.

charCodeAt을 이용하면 문자를 아스키코드에 대응하는 숫자로 변경해준다.

그리고 원하는 문자가 있다면 if (ch === "원하는 문자") 를 추가하자.

아래의 경우는 0~9, a~z, A~Z, "." 만 입력하도록 체크한다.

const dataRuleCheckForID = (ch) => {
  let ascii = ch.charCodeAt(0);
  if (48 /* 0 */ <= ascii && ascii <= 57 /* 9 */) return true;
  if (65 /* A */ <= ascii && ascii <= 90 /* Z */) return true;
  if (97 /* a */ <= ascii && ascii <= 122 /* z */) return true;
  if (ch === ".") return true;

  return false;
};

 

onChange에서 사용할 getLoginID는 아래와 같다.

모든 ID를 지워서 입력이 ""이 되는 경우에 대해 예외 처리를 하고, 

가장 마지막에 입력된 문자(length - 1)로 dataRuleCheckForID를 호출하여 가능하면 loginID를 set한다.

const getLoginID = (event) => {
  let value = event.target.value;

  if (value === "") {
    setLoginID(value);
    return;
  }

  let length = value.length;
  if (dataRuleCheckForID(value[length - 1]) === false) return;
  
  setLoginID(value);
  
  return;
};