[React Hook Form] React Hook Form 공부 - 6 (커스텀 Validation 함수 만들기) [7/25 study]

React Hook Form 공부 - 6

 

커스텀 Validation 함수 만들기

React-Hook-Form이 제공하는 유효성 검증 방법 말고 개발자가 직접 Validation을 만들 수 있는데요. 

바로 register 함수에서 두 번째 인자로 전달했던 그 객체 안에 validate 항목을 추가하면 됩니다 

email 부분에 커스텀 validation 로직을 구현해 보겠습니다. 

"admin@fly.dev" 라는 이메일로는 가입을 하지 못하게 해 볼까요?

<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.',
    },
    validate: fieldValue => {
      return fieldValue !== 'admin@fly.dev' || 'You can not use admin@fly.dev!'
    },
  })}
/>

 

validate 항목은 함수인데요. 위와 같이 OR(||) 연산자를 사용합니다. 

OR 연산자는 앞에 항목이 false이면 뒤에 항목을 참조하니까요? 

참고: https://velog.io/@alsuddl25/AND-%EC%99%80-OR%EC%9D%98-%EC%97%B0%EC%82%B0-%EB%B0%A9%EC%8B%9D

위 코드처럼 "admini@fly.dev"와 "다르다" 라는게 틀리면 에러 메시지를 리턴하게 됩니다.

 

 

커스텀 Validation 함수는 여러 개 만들 수 있는데요.

<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.',
    },
    validate: {
      noAdmin: fieldValue => {
        return (
          fieldValue !== 'admin@fly.dev' || 'You can not use admin@fly.dev!'
        )
      },
      noBlackList: fieldValue => {
        return (
          !fieldValue.endsWith('daum.net') || 'This domain is not supported.'
          // 이메일이 "daum.net"으로 끝나면 안 된다는 거죠.
        )
      },
    },
  })}
/>