resolvers

사용하기 쉬운 유효성 검사와 함께 수행자, 유연성 및 확장 가능한 형태.

설치하다

 npm install @hookform/resolvers

모래밭

• React-hook-form 검증 레졸버 문서

지원되는 Resolvers

• 설치하다
• 모래밭
  • 지원되는 Resolvers
• API
• QuickStart
  • 예
  • 조드
  • SuperTruct
  • 조이
  • 조끼
  • 클래스 유효성 검사기
  • IO-TS
  • 아니요
  • 컴퓨터 유형
  • 타자
  • AJV
  • 타입 상자
    • ValueCheck 과 함께
    • TypeCompiler 와 함께
  • Arktype
  • valibot
  • typeschema
  • 효과 -T
  • Vinejs
  • FluentValidation-ts
• 후원자
  • 스폰서
• 기고자

API

 type Options = {
  mode: 'async' | 'sync',
  raw?: boolean
}

resolver(schema: object, schemaOptions?: object, resolverOptions: Options)

	유형	필수의	설명
개요	object	✓	검증 스키마
스키마	object		검증 라이브러리 스키마 옵션
리졸 버전	object		Resolver Options, async 기본 모드입니다

QuickStart

예

죽은 간단한 객체 스키마 검증.

 import { useForm } from 'react-hook-form' ;
import { yupResolver } from '@hookform/resolvers/yup' ;
import * as yup from 'yup' ;

const schema = yup
  . object ( )
  . shape ( {
    name : yup . string ( ) . required ( ) ,
    age : yup . number ( ) . required ( ) ,
  } )
  . required ( ) ;

const App = ( ) => {
  const { register , handleSubmit } = useForm ( {
    resolver : yupResolver ( schema ) ,
  } ) ;

  return (
    < form onSubmit = { handleSubmit ( ( d ) => console . log ( d ) ) } >
      < input { ... register ( 'name' ) } / >
      < input type = "number" { ... register ( 'age' ) } / >
      < input type = "submit" / >
    < / form >
  ) ;
} ;

조드

정적 유형 추론을 통한 TypeScript 우선 스키마 검증

켈 아래의 예는 valueAsNumber 는 react-hook-form v6.12.0 (2020 년 11 월 28 일 출시)이 필요합니다.

 import { useForm } from 'react-hook-form' ;
import { zodResolver } from '@hookform/resolvers/zod' ;
import * as z from 'zod' ;

const schema = z . object ( {
  name : z . string ( ) . min ( 1 , { message : 'Required' } ) ,
  age : z . number ( ) . min ( 10 ) ,
} ) ;

const App = ( ) => {
  const {
    register ,
    handleSubmit ,
    formState : { errors } ,
  } = useForm ( {
    resolver : zodResolver ( schema ) ,
  } ) ;

  return (
    < form onSubmit = { handleSubmit ( ( d ) => console . log ( d ) ) } >
      < input { ... register ( 'name' ) } / >
      { errors . name ?. message && < p > { errors . name ?. message } < / p > }
      < input type = "number" { ... register ( 'age' , { valueAsNumber : true } ) } / >
      { errors . age ?. message && < p > { errors . age ?. message } < / p > }
      < input type = "submit" / >
    < / form >
  ) ;
} ;

SuperTruct

JavaScript (또는 TypeScript)의 데이터를 검증하는 간단하고 복합 가능한 방법.

 import { useForm } from 'react-hook-form' ;
import { superstructResolver } from '@hookform/resolvers/superstruct' ;
import { object , string , number } from 'superstruct' ;

const schema = object ( {
  name : string ( ) ,
  age : number ( ) ,
} ) ;

const App = ( ) => {
  const { register , handleSubmit } = useForm ( {
    resolver : superstructResolver ( schema ) ,
  } ) ;

  return (
    < form onSubmit = { handleSubmit ( ( d ) => console . log ( d ) ) } >
      < input { ... register ( 'name' ) } / >
      < input type = "number" { ... register ( 'age' , { valueAsNumber : true } ) } / >
      < input type = "submit" / >
    < / form >
  ) ;
} ;

조이

JS를위한 가장 강력한 데이터 검증 라이브러리.

 import { useForm } from 'react-hook-form' ;
import { joiResolver } from '@hookform/resolvers/joi' ;
import Joi from 'joi' ;

const schema = Joi . object ( {
  name : Joi . string ( ) . required ( ) ,
  age : Joi . number ( ) . required ( ) ,
} ) ;

const App = ( ) => {
  const { register , handleSubmit } = useForm ( {
    resolver : joiResolver ( schema ) ,
  } ) ;

  return (
    < form onSubmit = { handleSubmit ( ( d ) => console . log ( d ) ) } >
      < input { ... register ( 'name' ) } / >
      < input type = "number" { ... register ( 'age' ) } / >
      < input type = "submit" / >
    < / form >
  ) ;
} ;

조끼

조끼? 선언적 검증 테스트.

 import { useForm } from 'react-hook-form' ;
import { vestResolver } from '@hookform/resolvers/vest' ;
import { create , test , enforce } from 'vest' ;

const validationSuite = create ( ( data = { } ) => {
  test ( 'username' , 'Username is required' , ( ) => {
    enforce ( data . username ) . isNotEmpty ( ) ;
  } ) ;

  test ( 'password' , 'Password is required' , ( ) => {
    enforce ( data . password ) . isNotEmpty ( ) ;
  } ) ;
} ) ;

const App = ( ) => {
  const { register , handleSubmit , errors } = useForm ( {
    resolver : vestResolver ( validationSuite ) ,
  } ) ;

  return (
    < form onSubmit = { handleSubmit ( ( data ) => console . log ( data ) ) } >
      < input { ... register ( 'username' ) } / >
      < input type = "password" { ... register ( 'password' ) } / >
      < input type = "submit" / >
    < / form >
  ) ;
} ;

클래스 유효성 검사기

수업에 대한 데코레이터 기반 속성 검증.

켈 이 옵션을 tsconfig.json 에 추가해야합니다!

 "strictPropertyInitialization": false,
"experimentalDecorators": true

 import { useForm } from 'react-hook-form' ;
import { classValidatorResolver } from '@hookform/resolvers/class-validator' ;
import { Length , Min , IsEmail } from 'class-validator' ;

class User {
  @ Length ( 2 , 30 )
  username : string ;

  @ IsEmail ( )
  email : string ;
}

const resolver = classValidatorResolver ( User ) ;

const App = ( ) => {
  const {
    register ,
    handleSubmit ,
    formState : { errors } ,
  } = useForm < User > ( { resolver } ) ;

  return (
    < form onSubmit = { handleSubmit ( ( data ) => console . log ( data ) ) } >
      < input type = "text" { ... register ( 'username' ) } / >
      { errors . username && < span > { errors . username . message } < / span > }
      < input type = "text" { ... register ( 'email' ) } / >
      { errors . email && < span > { errors . email . message } < / span > }
      < input type = "submit" value = "Submit" / >
    < / form >
  ) ;
} ;

IO-TS

강력한 디코더로 데이터를 검증하십시오.

 import React from 'react' ;
import { useForm } from 'react-hook-form' ;
import { ioTsResolver } from '@hookform/resolvers/io-ts' ;
import t from 'io-ts' ;
// you don't have to use io-ts-types, but it's very useful
import tt from 'io-ts-types' ;

const schema = t . type ( {
  username : t . string ,
  age : tt . NumberFromString ,
} ) ;

const App = ( ) => {
  const { register , handleSubmit } = useForm ( {
    resolver : ioTsResolver ( schema ) ,
  } ) ;

  return (
    < form onSubmit = { handleSubmit ( ( d ) => console . log ( d ) ) } >
      < input { ... register ( 'username' ) } / >
      < input type = "number" { ... register ( 'age' ) } / >
      < input type = "submit" / >
    < / form >
  ) ;
} ;

export default App ;

아니요

작고 간단하며 빠른 JS 유효성 검사기

 import { useForm } from 'react-hook-form' ;
import { nopeResolver } from '@hookform/resolvers/nope' ;
import Nope from 'nope-validator' ;

const schema = Nope . object ( ) . shape ( {
  name : Nope . string ( ) . required ( ) ,
  age : Nope . number ( ) . required ( ) ,
} ) ;

const App = ( ) => {
  const { register , handleSubmit } = useForm ( {
    resolver : nopeResolver ( schema ) ,
  } ) ;

  return (
    < form onSubmit = { handleSubmit ( ( d ) => console . log ( d ) ) } >
      < input { ... register ( 'name' ) } / >
      < input type = "number" { ... register ( 'age' ) } / >
      < input type = "submit" / >
    < / form >
  ) ;
} ;

컴퓨터 유형

정적 유형 추론을 통한 TypeScript 우선 스키마 검증

 import { useForm } from 'react-hook-form' ;
import { computedTypesResolver } from '@hookform/resolvers/computed-types' ;
import Schema , { number , string } from 'computed-types' ;

const schema = Schema ( {
  username : string . min ( 1 ) . error ( 'username field is required' ) ,
  age : number ,
} ) ;

const App = ( ) => {
  const {
    register ,
    handleSubmit ,
    formState : { errors } ,
  } = useForm ( {
    resolver : computedTypesResolver ( schema ) ,
  } ) ;

  return (
    < form onSubmit = { handleSubmit ( ( d ) => console . log ( d ) ) } >
      < input { ... register ( 'name' ) } / >
      { errors . name ?. message && < p > { errors . name ?. message } < / p > }
      < input type = "number" { ... register ( 'age' , { valueAsNumber : true } ) } / >
      { errors . age ?. message && < p > { errors . age ?. message } < / p > }
      < input type = "submit" / >
    < / form >
  ) ;
} ;

타자

종속성이없는 정적 및 런타임 유형 어설 션 라이브러리

 import { useForm } from 'react-hook-form' ;
import { typanionResolver } from '@hookform/resolvers/typanion' ;
import * as t from 'typanion' ;

const isUser = t . isObject ( {
  username : t . applyCascade ( t . isString ( ) , [ t . hasMinLength ( 1 ) ] ) ,
  age : t . applyCascade ( t . isNumber ( ) , [
    t . isInteger ( ) ,
    t . isInInclusiveRange ( 1 , 100 ) ,
  ] ) ,
} ) ;

const App = ( ) => {
  const {
    register ,
    handleSubmit ,
    formState : { errors } ,
  } = useForm ( {
    resolver : typanionResolver ( isUser ) ,
  } ) ;

  return (
    < form onSubmit = { handleSubmit ( ( d ) => console . log ( d ) ) } >
      < input { ... register ( 'name' ) } / >
      { errors . name ?. message && < p > { errors . name ?. message } < / p > }
      < input type = "number" { ... register ( 'age' ) } / >
      { errors . age ?. message && < p > { errors . age ?. message } < / p > }
      < input type = "submit" / >
    < / form >
  ) ;
} ;

AJV

Node.js 및 브라우저에서 가장 빠른 JSON 유효성 검사기

 import { useForm } from 'react-hook-form' ;
import { ajvResolver } from '@hookform/resolvers/ajv' ;

// must use `minLength: 1` to implement required field
const schema = {
  type : 'object' ,
  properties : {
    username : {
      type : 'string' ,
      minLength : 1 ,
      errorMessage : { minLength : 'username field is required' } ,
    } ,
    password : {
      type : 'string' ,
      minLength : 1 ,
      errorMessage : { minLength : 'password field is required' } ,
    } ,
  } ,
  required : [ 'username' , 'password' ] ,
  additionalProperties : false ,
} ;

const App = ( ) => {
  const {
    register ,
    handleSubmit ,
    formState : { errors } ,
  } = useForm ( {
    resolver : ajvResolver ( schema ) ,
  } ) ;

  return (
    < form onSubmit = { handleSubmit ( ( data ) => console . log ( data ) ) } >
      < input { ... register ( 'username' ) } / >
      { errors . username && < span > { errors . username . message } < / span > }
      < input { ... register ( 'password' ) } / >
      { errors . password && < span > { errors . password . message } < / span > }
      < button type = "submit" > submit < / button >
    < / form >
  ) ;
} ;

타입 상자

TypeScript에 대한 정적 유형 해상도를 가진 JSON 스키마 유형 빌더

ValueCheck 과 함께

 import { useForm } from 'react-hook-form' ;
import { typeboxResolver } from '@hookform/resolvers/typebox' ;
import { Type } from '@sinclair/typebox' ;

const schema = Type . Object ( {
  username : Type . String ( { minLength : 1 } ) ,
  password : Type . String ( { minLength : 1 } ) ,
} ) ;

const App = ( ) => {
  const { register , handleSubmit } = useForm ( {
    resolver : typeboxResolver ( schema ) ,
  } ) ;

  return (
    < form onSubmit = { handleSubmit ( ( d ) => console . log ( d ) ) } >
      < input { ... register ( 'username' ) } / >
      < input type = "password" { ... register ( 'password' ) } / >
      < input type = "submit" / >
    < / form >
  ) ;
} ; 

TypeCompiler 와 함께

TypeBox 의 고성능 JIT, 자세한 내용을 읽으십시오

 import { useForm } from 'react-hook-form' ;
import { typeboxResolver } from '@hookform/resolvers/typebox' ;
import { Type } from '@sinclair/typebox' ;
import { TypeCompiler } from '@sinclair/typebox/compiler' ;

const schema = Type . Object ( {
  username : Type . String ( { minLength : 1 } ) ,
  password : Type . String ( { minLength : 1 } ) ,
} ) ;

const typecheck = TypeCompiler . Compile ( schema ) ;

const App = ( ) => {
  const { register , handleSubmit } = useForm ( {
    resolver : typeboxResolver ( typecheck ) ,
  } ) ;

  return (
    < form onSubmit = { handleSubmit ( ( d ) => console . log ( d ) ) } >
      < input { ... register ( 'username' ) } / >
      < input type = "password" { ... register ( 'password' ) } / >
      < input type = "submit" / >
    < / form >
  ) ;
} ;

Arktype

TypeScript의 1 : 1 유효성 검사기, 편집기에서 런타임까지 최적화되었습니다

 import { useForm } from 'react-hook-form' ;
import { arktypeResolver } from '@hookform/resolvers/arktype' ;
import { type } from 'arktype' ;

const schema = type ( {
  username : 'string>1' ,
  password : 'string>1' ,
} ) ;

const App = ( ) => {
  const { register , handleSubmit } = useForm ( {
    resolver : arktypeResolver ( schema ) ,
  } ) ;

  return (
    < form onSubmit = { handleSubmit ( ( d ) => console . log ( d ) ) } >
      < input { ... register ( 'username' ) } / >
      < input type = "password" { ... register ( 'password' ) } / >
      < input type = "submit" / >
    < / form >
  ) ;
} ;

valibot

구조 데이터 검증을위한 모듈 식 및 유형 안전 스키마 라이브러리

 import { useForm } from 'react-hook-form' ;
import { valibotResolver } from '@hookform/resolvers/valibot' ;
import * as v from 'valibot' ;

const schema = v . object ( {
  username : v . pipe (
    v . string ( 'username is required' ) ,
    v . minLength ( 3 , 'Needs to be at least 3 characters' ) ,
    v . endsWith ( 'cool' , 'Needs to end with `cool`' ) ,
  ) ,
  password : v . string ( 'password is required' ) ,
} ) ;

const App = ( ) => {
  const { register , handleSubmit } = useForm ( {
    resolver : valibotResolver ( schema ) ,
  } ) ;

  return (
    < form onSubmit = { handleSubmit ( ( d ) => console . log ( d ) ) } >
      < input { ... register ( 'username' ) } / >
      < input type = "password" { ... register ( 'password' ) } / >
      < input type = "submit" / >
    < / form >
  ) ;
} ;

typeschema

모든 유효성 검사 라이브러리와 호환되는 스키마 검증을위한 범용 어댑터

 import { useForm } from 'react-hook-form' ;
import { typeschemaResolver } from '@hookform/resolvers/typeschema' ;
import * as z from 'zod' ;

// Use your favorite validation library
const schema = z . object ( {
  username : z . string ( ) . min ( 1 , { message : 'Required' } ) ,
  password : z . number ( ) . min ( 1 , { message : 'Required' } ) ,
} ) ;

const App = ( ) => {
  const { register , handleSubmit } = useForm ( {
    resolver : typeschemaResolver ( schema ) ,
  } ) ;

  return (
    < form onSubmit = { handleSubmit ( ( d ) => console . log ( d ) ) } >
      < input { ... register ( 'username' ) } / >
      < input type = "password" { ... register ( 'password' ) } / >
      < input type = "submit" / >
    < / form >
  ) ;
} ;

효과 -T

풍부한 표준 라이브러리가있는 본격적인 기능 효과 시스템을 제공하는 강력한 타입 프레임 워크.

 import React from 'react' ;
import { useForm } from 'react-hook-form' ;
import { effectTsResolver } from '@hookform/resolvers/effect-ts' ;
import { Schema } from 'effect' ;

const schema = Schema . Struct ( {
  username : Schema . String . pipe (
    Schema . nonEmpty ( { message : ( ) => 'username required' } ) ,
  ) ,
  password : Schema . String . pipe (
    Schema . nonEmpty ( { message : ( ) => 'password required' } ) ,
  ) ,
} ) ;

type FormData = Schema . Schema . Type < typeof schema > ;

interface Props {
  onSubmit : ( data : FormData ) => void ;
}

function TestComponent ( { onSubmit } : Props ) {
  const {
    register ,
    handleSubmit ,
    formState : { errors } ,
    // provide generic if TS has issues inferring types
  } = useForm < FormData > ( {
    resolver : effectTsResolver ( schema ) ,
  } ) ;

  return (
    < form onSubmit = { handleSubmit ( onSubmit ) } >
      < input { ... register ( 'username' ) } / >
      { errors . username && < span role = "alert" > { errors . username . message } < / span>}

      < input { ... register ( 'password' ) } / >
      { errors . password && < span role = "alert" > { errors . password . message } < / span>}

      < button type = "submit" > submit < / button>
    < / form >
  ) ;
}

Vinejs

Vinejs는 node.js의 양식 데이터 검증 라이브러리입니다

 import { useForm } from 'react-hook-form' ;
import { vineResolver } from '@hookform/resolvers/vine' ;
import vine from '@vinejs/vine' ;

const schema = vine . compile (
  vine . object ( {
    username : vine . string ( ) . minLength ( 1 ) ,
    password : vine . string ( ) . minLength ( 1 ) ,
  } ) ,
) ;

const App = ( ) => {
  const { register , handleSubmit } = useForm ( {
    resolver : vineResolver ( schema ) ,
  } ) ;

  return (
    < form onSubmit = { handleSubmit ( ( d ) => console . log ( d ) ) } >
      < input { ... register ( 'username' ) } / >
      { errors . username && < span role = "alert" > { errors . username . message } < / span>}
      < input { ... register ( 'password' ) } / >
      { errors . password && < span role = "alert" > { errors . password . message } < / span>}
      < button type = "submit" > submit < / button>
    < / form >
  ) ;
} ;

FluentValidation-ts

강력한 유형의 유효성 검사 규칙을 구축하기위한 TypeScript 우선 라이브러리

 import { useForm } from 'react-hook-form' ;
import { fluentValidationResolver } from '@hookform/resolvers/fluentvalidation-ts' ;
import { Validator } from 'fluentvalidation-ts' ;

class FormDataValidator extends Validator < FormData > {
  constructor ( ) {
    super ( ) ;

    this . ruleFor ( 'username' )
      . notEmpty ( )
      . withMessage ( 'username is a required field' ) ;
    this . ruleFor ( 'password' )
      . notEmpty ( )
      . withMessage ( 'password is a required field' ) ;
  }
}

const App = ( ) => {
  const { register , handleSubmit } = useForm ( {
    resolver : fluentValidationResolver ( new FormDataValidator ( ) ) ,
  } ) ;

  return (
    < form onSubmit = { handleSubmit ( ( d ) => console . log ( d ) ) } >
      < input { ... register ( 'username' ) } / >
      { errors . username && < span role = "alert" > { errors . username . message } < / span>}
      < input { ... register ( 'password' ) } / >
      { errors . password && < span role = "alert" > { errors . password . message } < / span>}
      < button type = "submit" > submit < / button>
    < / form >
  ) ;
} ; 

후원자

우리의 모든 후원자들에게 감사합니다! [후원자가 되십시오].

기고자

이 멋진 사람들에게 감사합니다! [기여자가 되십시오].