반응형
- 아이디 한글 입력 불가 처리
- 아이디 저장
- 비밀번호 표시
아이디 한글 입력 불가 처리
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;
};
반응형
'개발 > React' 카테고리의 다른 글
로그인 폼 만들기 - 비밀번호 표시 (0) | 2022.03.14 |
---|---|
로그인 폼 만들기 - 아이디 저장 (2) | 2022.03.13 |
리액트 - 로그인 폼 만들기 Login Form (0) | 2022.03.09 |
리액트 CSS - 간단한 accordion 만들기 (0) | 2022.03.02 |
리액트 배열을 json으로 분리하기 (react json import) (0) | 2022.03.01 |
댓글