resolvers

Bentuk performant, fleksibel, dan dapat diperluas dengan validasi yang mudah digunakan.

Memasang

 npm install @hookform/resolvers

Tautan

• Dokumentasi Resolver Validasi Bereaksi-Hook

Penyelidikan yang Didukung

• Memasang
• Tautan
  • Penyelidikan yang Didukung
• API
• QuickStart
  • Yup
  • Zod
  • Superstruct
  • Joi
  • Rompi
  • Validator kelas
  • Io-ts
  • Tidak
  • tipe yang dihitung
  • typanion
  • AJV
  • Typebox
    • Dengan ValueCheck
    • Dengan TypeCompiler
  • Arktype
  • Valibot
  • Typeschema
  • Efek-Ts
  • Cembun
  • fluentvalidation-ts
• Pendukung
  • Sponsor
• Kontributor

API

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

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

	jenis	Diperlukan	Keterangan
skema	object	✓	Skema validasi
skemaopsi	object		Opsi Skema Perpustakaan Validasi
ResolverOptions	object		opsi resolver, async adalah mode default

QuickStart

Yup

Validasi Skema Objek Sederhana Mati.

 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 >
  ) ;
} ;

Zod

Validasi Skema TypeScript-First dengan inferensi tipe statis

️ Contoh di bawah ini menggunakan valueAsNumber , yang membutuhkan V6.12.0 react-hook-form (dirilis 28 November 2020) atau lebih baru.

 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 >
  ) ;
} ;

Superstruct

Cara sederhana dan dapat disusun untuk memvalidasi data dalam JavaScript (atau 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 >
  ) ;
} ;

Joi

Perpustakaan validasi data yang paling kuat untuk 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 >
  ) ;
} ;

Rompi

Rompi ? Pengujian validasi deklaratif.

 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 >
  ) ;
} ;

Validator kelas

Validasi properti berbasis dekorator untuk kelas.

️ Ingatlah untuk menambahkan opsi ini ke tsconfig.json Anda!

 "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

Validasi data Anda dengan decoder yang kuat.

 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 ;

Tidak

Validator JS yang kecil, sederhana, dan cepat

 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 >
  ) ;
} ;

tipe yang dihitung

Validasi Skema TypeScript-First dengan inferensi tipe statis

 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 >
  ) ;
} ;

typanion

Perpustakaan Assersi Tipe Statis dan Runtime Tanpa Ketergantungan

 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

Validator JSON tercepat untuk Node.js dan Browser

 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 >
  ) ;
} ;

Typebox

Pembuat Jenis Skema JSON dengan resolusi tipe statis untuk TypeScript

Dengan 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 >
  ) ;
} ; 

Dengan TypeCompiler

JIT TypeBox berkinerja tinggi, baca lebih lanjut

 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

Validator 1: 1 TypeScript, dioptimalkan dari editor ke runtime

 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

Perpustakaan Skema Modular dan Aman untuk memvalidasi data struktural

 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

Adaptor universal untuk validasi skema, kompatibel dengan pustaka validasi apa pun

 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 >
  ) ;
} ;

Efek-Ts

Kerangka kerja naskah yang kuat yang menyediakan sistem efek fungsional sepenuhnya dengan perpustakaan standar yang kaya.

 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 >
  ) ;
}

Cembun

Vinejs adalah pustaka validasi data formulir untuk 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

Perpustakaan TypeScript-First untuk membangun aturan validasi yang sangat diketik

 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 >
  ) ;
} ; 

Pendukung

Terima kasih pergi ke semua pendukung kami! [Menjadi pendukung].

Kontributor

Terima kasih pergi ke orang -orang luar biasa ini! [Menjadi kontributor].