React Form Login Validation

Marcus·2019년 2월 21일
3

안녕하세요 Marcus입니다.
이번 포스팅은 React에서 Login을 구현할 때 유효성검사를 어떻게 하는지에 대해서
제가 사용하는 방법을 소개해드리려고 합니다.

많은 라이브러리들이 있지만 저는 직접 구현해서 사용합니다 한번 보시죠!

먼저 javascript에 정규 표현식을 사용해서 email식이 맞는지를 체크하는 함수를 하나 만들어줍니다.

src/helpers/auth.js

export const isEmail = email => {
  const emailRegex = /^(([^<>()\[\].,;:\s@"]+(\.[^<>()\[\].,;:\s@"]+)*)|(".+"))@(([^<>()[\].,;:\s@"]+\.)+[^<>()[\].,;:\s@"]{2,})$/i;

  return emailRegex.test(email);
};

이 함수는 isEmail로 넘어오는 인자 Email을 test해서 true인지 false인지 체크하는 함수입니다.

src/app.js

다음 함수는 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

좋은 유효성검사 라이브러리나 방법이 있으시면 댓글로 공유해주시면 감사하겠습니다!

profile
개발을 사랑합니다 :)MarketDesigners - Front-End Engineer

1개의 댓글

comment-user-thumbnail
2020년 5월 13일

좋은 정보 감사합니다!

답글 달기