react-hook-form 유효성 검사

이메일 유효성 검사

function InputEmail(): JSX.Element {

	const methods = useFormContext();
	const {
		register,
		control,
		handleSubmit,
		reset,
		formState: { errors },
	} = methods;

	return (
		<InputEmailBox>
			<div className="input-box">
				<input
					type="text"
					{...register(`userEmail`, {
						required: '아이디(이메일)을 입력하세요',
						minLength: {
							value: 9,
							message: '올바른 이메일 주소를 입력하세요.',
						},
						maxLength: {
							value: 50,
							message: '올바른 이메일 주소를 입력하세요.',
						},

						pattern: {
							value: /^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,}$/i,
							message: '올바른 이메일 주소를 입력하세요.',
						},
						validate: {
							isAvailable: async value => {
								const res = await GetDuplicateEmail(value);
								return (
									(res && res.data.result) ||
									'이미 사용중인 이메일입니다. 다른 이메일을 입력하세요'
								);
							},
						},
					})}
					placeholder="이메일을 입력해 주세요."
				/>
				{errors && errors[`${registerId}`] && (
					<p className="warning-message">{`${
						errors[`${registerId}`]?.message
					}`}</p>
				)}
			</div>
		</InputEmailBox>
	);
}

export default InputEmail;

register

input 태그에 개별 input을 구별하기 위한 유니크한 식별자 이름을 넣어 준다.

유효성 검사

resister의 두번째 파라미터로 유효성 검사를 할수 있다.

• required 값을 입력하지 않으면 false로 '아이디(이메일)을 입력하세요' 라는 메시지가 출력된다.

• minLength 글자의 최소 길이를 입력하도록 한다. 입력하지 않으면 false로 '올바른 이메일 주소를 입력하세요.' 라는 메시지가 뜬다.

• maxLength 글자의 최대 길이를 입력하도록 한다. 입력하지 않으면 false로 '올바른 이메일 주소를 입력하세요.' 라는 메시지가 뜬다.

• pattern 이메일 양식을 검사하는 정규식이 들어 있다. 정규식에서 벗어나면 '올바른 이메일 주소를 입력하세요.' 라는 메시지가 뜬다.

• validate : 이메일이 중복인지 알수있도록 검사한다. validate에서는 커스텀한 함수를 실행시켜 줄수 있다. 중복되었을 경우를 나타내는 함수를 호출하여 false인 경우 '이미 사용중인 이메일입니다. 다른 이메일을 입력하세요' 라는 메시지가 뜬다.

메시지 UI 구성

const {
		register,
		control,
		handleSubmit,
		reset,
		formState: { errors },
	} = methods;

//코드 하단에서 
    
{errors && errors[`userEmail`] && (
	<p className="warning-message">{`${
		errors[`userEmail`]?.message
	}`}</p>
)}

errors의 input 식별자를 검색하여 내용이 존재할 경우 각각의 메시지를 가져와 표시 해준다.