首頁>編程相關>其他源碼
下載

具有易於使用驗證的性能，靈活和可擴展的形式。

安裝

 npm install @hookform/resolvers

鏈接

  • React-Hook-form驗證解析器文檔

支持的解析器

  • 安裝
  • 鏈接
    • 支持的解析器
  • API
  • Quickstart
    • 是的
    • zod
    • 上部結構
    • joi
    • 背心
    • 類驗證器
    • IO-TS
    • 沒有
    • 計算型
    • 打字
    • AJV
    • typebox
      • 與ValueCheck
      • 與TypeCompiler
    • arktype
    • 瓦利博特
    • 類型chema
    • 效應-TS
    • Vinejs
    • FulentValidation-TS
  • 支持者
    • 贊助商
  • 貢獻者

API 

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

resolver(schema: object, schemaOptions?: object, resolverOptions: Options)
類型必需的描述
模式object ✓驗證模式
模式object驗證庫模式選項
分辨率object解析器選項， 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 >
  ) ;
} ;

zod

使用靜態類型推理的打字稿優先架構驗證

配x下面的示例使用了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 >
  ) ;
} ;

上部結構

一種簡單且可組合的方法，用於驗證JavaScript中的數據（或打字稿）。 

 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

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

類驗證器

基於裝飾者的課程驗證。

配x請記住將這些選項添加到您的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 >
  ) ;
} ;

計算型

使用靜態類型推理的打字稿優先架構驗證

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

typebox

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

打字稿的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 >
  ) ;
} ;

瓦利博特

用於驗證結構數據的模塊化和類型安全架構庫

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

類型chema

用於模式驗證的通用適配器，與任何驗證庫兼容

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

效應-TS

一個功能強大的打字稿框架，可提供具有豐富標準庫的成熟功能效果系統。 

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

FulentValidation-TS

一個打字稿優先的庫，用於構建強大的驗證規則

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

支持者

感謝我們所有的支持者！ [成為支持者]。

貢獻者

感謝這些好人！ [成為貢獻者]。

展開
附加信息
相關應用
爲您推薦
相關資訊 全部