타입스크립트로 로그인 유효성 검증하기
버튼에 disabled 설정하기
- input에 모든 값이 작성되지 않으면 버튼을 비활성화 시키도록 disabled를 설정하기 위한 내용이다.
- 자바스크립트로 작성할 때는 조건문 자체에 변수를 넣는다던가 등등 편하게 true, false를 신경쓰지 않고 사용했었는데, 타입스크립트에서는 적용되지 않는다! (eslint 설정 때문인지도 모른다.)
const id = ''
const password = ''
//기존 js 코드 작성시
const disabled = !id || !password;
if(id){
//실행할 내용~~
}
if(password){
//실행할 내용~~
}
//ts 작성시
const isId = Boolean(id);
const isPassword = Boolean(password);
const disabled = !isId || !isPassword;
if(isId){
//실행할 내용~~
}
if(isPassword){
//실행할 내용~~
}eslint가 설정되어 있지 않았던 프로젝트에서는 자바스크립트처럼 작성이 가능했던 것으로 기억한다..!
아무래도 Boolean() 메서드를 통해서 확실하게 boolean 값을 넘겨주는 것이 오류가 적을 것이기 때문에 eslint에서 error를 발생시키는 것 같다... 확실한게 좋지..!
정규식 표현
- 이메일 형식
/\S+@\S+\.\S+/- 비밀번호 : 영어, 숫자 필수 / 특수문자 허용
/^(?=.*[0-9])(?=.*[a-zA-Z])[a-zA-Z0-9!@#$%^&*()._-]*$/- 닉네임 : 영어, 숫자, 한글 사용 가능 / 자음, 모음만 쓰는 것 불가
/^(?=.*[a-z0-9가-힣])[a-z0-9가-힣]*$/
정규식 사용법
const isValidId = (): boolean => {
const emailCheck = /\S+@\S+\.\S+/;
if (emailCheck.test(id)) {
return false;
}
return true;
};정규식 표현 뒤에 .test를 사용하면 boolean 값을 얻을 수 있다.
