resolvers

Formas de rendimiento, flexible y extensible con validación fácil de usar.

Instalar

 npm install @hookform/resolvers

Campo de golf

• React-gook-forma de validación de la resolución de resolución

Resistentes compatibles

• Instalar
• Campo de golf
  • Resistentes compatibles
• API
• Inicio rápido
  • Sí
  • Zod
  • Supervisión
  • Joi
  • Chaleco
  • Validador de clase
  • io-ts
  • No
  • tipos calculados
  • típano
  • AJV
  • Caja de tipos
    • Con ValueCheck
    • Con TypeCompiler
  • Arktype
  • Valibot
  • Typeschema
  • Efecto-TS
  • Vinejs
  • Validación fluentada-ts
• Patrocinadores
  • Patrocinadores
• Colaboradores

API

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

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

	tipo	Requerido	Descripción
esquema	object	✓	esquema de validación
esquema	object		Opciones de esquema de biblioteca de validación
resolución	object		Opciones de resolución, async es el modo predeterminado

Inicio rápido

Sí

Validación de esquema de objeto simple muerto.

 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

Validación de esquema de TypeScript-First con inferencia de tipo estático

️ El siguiente ejemplo usa el valueAsNumber , que requiere react-hook-form V6.12.0 (lanzado el 28 de noviembre de 2020) o posterior.

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

Supervisión

Una forma simple y compuesta de validar los datos en JavaScript (o 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

La biblioteca de validación de datos más potente para 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 >
  ) ;
} ;

Chaleco

Chaleco ? Prueba de validación declarativa.

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

Validador de clase

Validación de propiedad basada en el decorador para clases.

️ ¡Recuerde agregar estas opciones a su 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

Valide sus datos con decodificadores potentes.

 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 ;

No

Un validador JS pequeño, simple y rápido

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

tipos calculados

Validación de esquema de TypeScript-First con inferencia de tipo estático

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

típano

Biblioteca de afirmación de tipo estático y de tiempo de ejecución sin dependencias

 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

El validador JSON más rápido para node.js y navegador

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

Caja de tipos

JSON Schema Type Builder con resolución de tipo estático para TypeScript

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

Con TypeCompiler

Un jit de alto rendimiento de TypeBox , lea más

 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

Validador 1: 1 de TypeScript, optimizado de editor a tiempo de ejecución

 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

La biblioteca de esquema seguro modular y tipo para validar datos estructurales

 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

Adaptador universal para la validación del esquema, compatible con cualquier biblioteca de validación

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

Efecto-TS

Un potente marco de mecanografiado que proporciona un sistema de efectos funcionales completamente completos con una biblioteca estándar rica.

 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 es una biblioteca de validación de datos de formulario para 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 >
  ) ;
} ;

Validación fluentada-ts

Una biblioteca tytrypcript-primera para construir reglas de validación fuertemente tipificadas

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

Patrocinadores

¡Gracias a todos nuestros patrocinadores! [Conviértete en un patrocinador].

Colaboradores

¡Gracias a estas maravillosas personas! [Conviértete en un contribuyente].