[TIL] Form Validation - 1

오늘 공부한것 & 기억할 내용

Zod

• 유효성 검사를 하기 위해 도와주는 도구

"use server"
import {z} from 'zod'

const formSchema = z.object({
    username:z.string().min(5).max(10),
    email:z.string().email(),
    password:z.string().min(10),
    passwordConfirm:z.string().min(10)
})
export async function createAccount(prev:any,data:FormData) {
    const formData = {
        username:data.get("username"),
        email:data.get('email'),
        password:data.get('password'),
        passwordConfirm:data.get('passwordConfirm')
    }
    formSchema.parse(formData)
}

parse

• error를 throw하기에 parse를 사용하면 try/catch를 사용해야한다.

formSchema.parse(formData)

safeParse

• error를 throw하지 않는다 그 대신 유효성 검사의 결과를 얻게 된다.

//데이터를 검증
//safeParse을 통해 formSchema의 형식에 맞는지 formData를 데이터 검증한다
const result = formSchema.safeParse(formData)

error

• 각각의 input의 error를 주기 위해 flatten을 사용한다.
• error문구를 커스텀 하려면 각각의 메소드에 마우스를 가져다 대면 커스텀 할 수 있는 방법 보임 (아래 refine 예시에서 확인)

//action.ts
if(!result.success){
        console.log(result.error.flatten())
        return result.error.flatten()
}
//page.tsx
const [state ,action] = useActionState(createAccount,null)

<FormInput name="username" type="text" placeholder="Username" required errors={state?.fieldErrors.username}/>

refine

• 유효성 검사에서 검증이 필요할때 사용하는 도구

//username에서 특정 문구를 포함하고 있는지 확인
const formSchema = z.object({
    username:z.string({
        invalid_type_error:"user name must be a string",
        required_error:"Where is my username?"
    }).min(5,"Way too short").max(10,"That is too long")
    .refine(username => !username.includes('hi'),"No hi allowed")
})

• password중복 검사를 하기 위해 object 전체에 검증(refine)을 사용한다.

//form전체에 검증을 했기에 오류메시지는 formError메세지로 나타난다.
const formSchema = z.object({
}).refine(({password,passwordConfirm}) => password === passwordConfirm,"Both passwords should be the same")

//error문구를 confimPassword에 주기위해 아래 코드로 변경
.refine(({password,passwordConfirm}) => password === passwordConfirm,{
    message:"Both passwords should be the same",
    path:["passwordConfirm"]
})

regex

• 정규식 검사하기 위한 도구

const passwordRegex = new RegExp(
    /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*?[#?!@$%^&*-]).+$/
);
const formSchema = z.object({
password:z.string().min(10).regex(passwordRegex,"password must have lowercase...etc"),
})

trim

• input창의 앞,뒤 공백을 넣었을때 삭제해줌

username:z.string().trim()

배운점 & 느낀점

zod를 사용해 form 유효성 검사를 하는건 정말 신세계라는걸 배웠다. 엄청난 정규식을 만들지 않아도 zod에 모든 기능들이 다 있기에 쉽게 유효성 검사를 할 수 있을거 같다.