안녕하세요 Marcus입니다.
이번 포스팅은 React에서 Login을 구현할 때 유효성검사를 어떻게 하는지에 대해서
제가 사용하는 방법을 소개해드리려고 합니다.
많은 라이브러리들이 있지만 저는 직접 구현해서 사용합니다 한번 보시죠!
먼저 javascript에 정규 표현식을 사용해서 email식이 맞는지를 체크하는 함수를 하나 만들어줍니다.
export const isEmail = email => {
const emailRegex = /^(([^<>()\[\].,;:\s@"]+(\.[^<>()\[\].,;:\s@"]+)*)|(".+"))@(([^<>()[\].,;:\s@"]+\.)+[^<>()[\].,;:\s@"]{2,})$/i;
return emailRegex.test(email);
};
이 함수는 isEmail로 넘어오는 인자 Email을 test해서 true인지 false인지 체크하는 함수입니다.
다음 함수는 Login Page에서 위에 설명한 isEmail을 테스트하는 함수를 만들어보겠습니다.
onTextValidation = () => {
let emailError = "";
if (!isEmail(this.state.email)) {
emailError = "email Error!";
}
if (emailError) {
this.setState({ emailError });
return false;
}
return true;
};
생각보다 간단한 코드입니다.
이제 이를 onSubmit에서 확인해볼까요?
onSubmit = e => {
e.preventDefault();
const valid = this.onTextValidation();
if (!valid) {
console.log("fuck", this.state);
}
};
console.log()에 찍힌 내용을 보면 email 표현식이 틀렸기 때문에 emailError: 에 값이 들어가있는걸 보실 수 있습니다.
그럼 에러를 어떻게 보여줄까요?
<form onSubmit={this.onSubmit}>
<input
onChange={this.onTextChange}
className="validation"
name="email"
type="text"
placeholder="e-mail"
onFocus=""
/>
<div style={{ color: "red", fontSize: "12px" }}>
{this.state.emailError}
</div>
<button type="submit">click</button>
</form>
다음과 같이 표현됩니다!!
생각보다 쉽지 않으신가요??
이상으로 정규표현식을 사용한 validation 체크 방식이였습니다:D
해당 코드는 깃허브에서 확인 가능합니다.
https://github.com/Jogeonsang/login-validation-test
간단한 방법이 없을까 고민하다가 구현한 페이지라서 따로 스타일링을 하지 않은점 너그럽게 봐주시면 감사하겠습니다:D
좋은 유효성검사 라이브러리나 방법이 있으시면 댓글로 공유해주시면 감사하겠습니다!
좋은 정보 감사합니다!