首页>编程相关>其他源码
下载

具有易于使用验证的性能，灵活和可扩展的形式。

安装

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

支持者

感谢我们所有的支持者！ [成为支持者]。

贡献者

感谢这些好人！ [成为贡献者]。

展开
附加信息
相关应用
为您推荐
相关资讯 全部