Formes performantes, flexibles et extensibles avec une validation facile à utiliser.
npm install @hookform/resolvers
ValueCheck
TypeCompiler
type Options = {
mode: 'async' | 'sync',
raw?: boolean
}
resolver(schema: object, schemaOptions?: object, resolverOptions: Options)
taper | Requis | Description | |
---|---|---|---|
schéma | object | ✓ | schéma de validation |
schémas | object | Options de schéma de bibliothèque de validation | |
résolveroptions | object | Options de résolveur, async est le mode par défaut |
Validation du schéma d'objet simple mort.
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-First Schema Validation avec une inférence de type statique
️ L'exemple ci-dessous utilise levalueAsNumber
, qui nécessite un v6.12.0react-hook-form
(publié le 28 novembre 2020) ou ultérieure.
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 >
) ;
} ;
Un moyen simple et composable de valider les données dans JavaScript (ou 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 >
) ;
} ;
La bibliothèque de validation des données la plus puissante pour 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 >
) ;
} ;
Gilet? Test de validation déclarative.
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 >
) ;
} ;
Validation de la propriété basée sur le décorateur pour les classes.
️ N'oubliez pas d'ajouter ces options à votretsconfig.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 >
) ;
} ;
Validez vos données avec de puissants décodeurs.
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 ;
Un petit validateur JS simple, simple et rapide
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-First Schema Validation avec une inférence de type statique
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 >
) ;
} ;
Bibliothèque d'assertion de type statique et d'exécution sans dépendances
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 >
) ;
} ;
Le validateur JSON le plus rapide pour Node.js et le navigateur
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 >
) ;
} ;
Builateur de type schéma JSON avec résolution de type statique pour dactylographie
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
Un jit haute performance de TypeBox
, en savoir plus
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 >
) ;
} ;
Validateur 1: 1 de TypeScript, optimisé de l'éditeur à l'exécution
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 >
) ;
} ;
La bibliothèque de schéma modulaire et de type sécurisé pour valider les données structurelles
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 >
) ;
} ;
Adaptateur universel pour la validation du schéma, compatible avec toute bibliothèque de validation
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 >
) ;
} ;
Un cadre de type puissant qui fournit un système d'effet fonctionnel à part entière avec une riche bibliothèque standard.
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 est une bibliothèque de validation de données de formulaire pour 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 >
) ;
} ;
Une bibliothèque de typeScript-First pour établir des règles de validation fortement typées
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 >
) ;
} ;
Merci à tous nos bailleurs de fonds! [Devenez un bailleur de fonds].
Merci à ces gens merveilleux! [Devenir contributeur].