antd form을 활용해 custom validator를 만들어보자!
기본 validator살펴보기
antd는 기본적인 validator를 제공해준다.
기본적인 다양한 validator를 통해 form의 입력값에 대한 검증을 할 수 있다.
<Form.Item
label="이름"
name="name"
rules={[
{
required: true,
message: "이름은 필수로 입력해야 합니다!",
},
]}
>
<Input />위와 같은 코드 처럼 rules안에 다양한 기본 validator를 수행할 수 있다.
custom validator만들기
rules만들기
전화번호에 대한 검증을 해보자!
rules={[
{
validator: valiedatPhoneNumber,
message: "올바른 전화번호 양식이 아닙니다.",
}
]}이러한 방식으로 사용할 수 있다.
rules안에 기본으로 제공되는 validator들도 같이 사용하고 싶었는데, rules배열안에 같이 사용한다면 디자인이 안이뻐진다🥲
해결해보려 삽질했지만,, custom validator의 경우 하나의 함수안에 다 처리를 해줘야되는것 같다.
검증로직 작성하기
const valiedatPhoneNumber = (phoneNumberInput, value) => {
if (!value.startsWith("010")) {
return Promise.reject(new Error(phoneNumberInput.message));
} else {
return Promise.resolve();
}
};첫번째 인자는 해당 input의 데이터들이 넘어온다.
우리는 custom validator를 만들것이므로 첫번째 인자는 무시하자.
두번째 인자는 해당 input의 value가 넘어온다.
이를 활용해 검증을 해주면 된다.
이때 error message는 Promise를 통해 나타낼 수 있다.
첫번째 인자는 활용하지 않으므로 우리가 원하는 에러문구를 입력하자!
이렇게 작성한다면 분기에 따라 적절하게 에러가 한줄씩 출력되는것을 확인할수 있다.
