[React Hook Form] React Hook Form 공부 - 4 (유효성 검증(Validation)) [7/25 study]

React Hook Form 공부 - 4

 

유효성 검증(Validation)

Form의 유효성 검증으로 React-Hook-Form이 제공하는 방법은 다음과 같습니다.

총 6개 제공
required
minLength & maxLength
min & max
pattern

 

register 함수의 두 번째 인자로 들어갈 객체 안에 넣어주면 됩니다.

<form onSubmit={handleSubmit(onSubmit)} noValidate>

먼저, 위와 같이 form에 noValidate 옵션을 주어서 HTML 기본적으로 유효성 검증하는 기능을 끄겠습니다.
이렇게 하면 유효성 검증은 오로지 React-Hook-Form이 담당하게 됩니다.

required 유효성 검증을 시현해 보겠습니다.

<input
  type='text'
  id='username'
  {...register('username', {
    required: true,
  })}
/>

 

register 함수 안에 넣는 인자 중 에 두 번째 인자로 객체를 넣어주고 그 안에 required 항목을 넣어주면 됩니다.

그러면 아래 그림처럼 ERROR 부분이 단순히 required 이라고만 나옵니다.

 

우리는 무엇이 문제인지 브라우저에 보여줘야 하기 때문에 아래와 같은 사용 방법을 더 선호합니다.

 

<input
  type='text'
  id='username'
  {...register('username', {
    required: 'Username is required.',
  })}
/>

이렇게 되면 아래 그림과 같이 message 라는게 생기게 되는데요.

 

+)

required: {
  value : true,
  message: "Username is required."
}

// 위 코드의 축약본이 아래 코드임 (같은 내용)

required: 'Username is required.'

 

email 부분은 RegEx(정규 표현식)의 패턴을 이용해야 하는데요.

참고사이트

https://hamait.tistory.com/342

정규표현식 (Regex) 정리

 

<input
  type='email'
  id='email'
  {...register('email', {
    pattern: {
      value:
        /^[a-zA-Z0-9.!#$%&’*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$/,
      message: 'Email is invalid.',
    },
  })}
/>

 

pattern은 축약 버전보다 value-message 방식으로 써야 합니다.

 

그리고, password는 minLength 8로 지정해 보겠습니다.

<input
  type='password'
  id='password'
  {...register('password', {
    minLength: {
      value: 8,
      message: 'Password must be at least 8 characters.',
    },
  })}
/>

 

테스트 결과

그런데, DevTool에 나타난다고 좋은 게 아닙니다. 

사용자가 봐야 하는 거죠. 

그럼, error 메시지를 어떻게 화면에 보여줄까요? 다음시간에