This library is a lightweight, dependency-free solution for form validation and submission designed specifically for React applications.The following component libraries have been adapted: Next UI, Ant Design, and MUI.
该库是一个专为 React 应用设计的轻量级、无依赖的表单验证和提交解决方案。目前已适配完成一下组件库Next UI、Ant Design、MUI。
推荐直接看示例：这里更新是最即时的，也是推荐的使用方式。
中文 | English | API | GitHub | 示例:Stackblitz | 示例:GitHub
基于 React Hooks 和 TypeScript 开发，旨在提供一个简洁、高效且易于扩展的方式来处理表单验证和提交，无论是在简单还是复杂的表单场景中都能灵活应对。本库的设计哲学是兼容性和扩展性，理念是支持开发者以最少的代码实现最丰富的功能，核心不绑定任何 UI 组件库，从而支持所有 React 组件库；对第三方组件库的支持以独立模块方式实现。
# pnpm
pnpm add hook-form-react
# yarn
yarn add hook-form-react
# npm
npm i hook-form-react
原则上可适应 React 所有的组件库，只是代码量略大
// 基础用法：原则上可适应 React 所有的组件库，只是代码量略大
import { useAttr, useFormData } from 'hook-form-react'
// 使用了nextui
import { Button, Input, Link } from '@nextui-org/react'
const Example = () => {
const formData = useFormData(
{ password: '', username: '' }, // 默认数据
{
// 验证规则:password
password: [
{
execute: async (value) => !!value,
msg: '密码不能为空'
}
],
// 验证规则:username
username: [
{
execute: async (value) => !!value,
msg: '用户账户不能为空'
}
]
}
)
// 提交
const submit = async () => {
// 验证所有表单
const isValid = await formData.doAllValidate()
console.log('submit:isValid: ', isValid)
if (isValid) {
// 验证成功
console.log('formValue:', formData.value)
}
}
return (
<div>
<Input
placeholder="请输入账户"
className="mb-4 mt-10 login-input text-sm"
isInvalid={formData.errors.username?.isInvalid} // 绑定错误状态
errorMessage={formData.errors.username?.msg} // 绑定错误提示
value={formData.value.username} // 绑定value
onChange={(e) => formData.pushValue('username', e.target.value)} // 帮onChange
></Input>
<Input
autoComplete="new-password"
type="password"
placeholder="请输入登录密码"
value={formData.value.password}
isInvalid={formData.errors.password?.isInvalid}
errorMessage={formData.errors.password?.msg}
onChange={(e) => formData.pushValue('password', e.target.value)}
></Input>
<Button onClick={submit}>登录</Button>
</div>
)
}
提供了辅助工具，可以使得开发更快捷，同时不丢失高度的可定制性
// 高级用法：提供了辅助工具，可以使得开发更快捷，同时不丢失高度的可定制性
import { Button, Input } from '@nextui-org/react'
import { useAttr, useFormData, Verifications } from 'hook-form-react'
export const Example = () => {
const formData = useFormData(
{ password: '', username: '' },
{
// 支持多个校验
password: [
// 自带验证器必填校验
// 开发者也可以自行在项目中补充其它验证规则，具体请看开发者文档（待补充）
Verifications.required(),
// 自带验证器密码校验
Verifications.password()
],
username: [
// 自带验证器的必填校验 + 自定义提示
Verifications.required('用户账户不能为空'),
// 自带验证器的用户名校验
Verifications.username()
]
}
)
// 使用组件快速绑定hook
const attr = useAttr(formData)
const submit = async () => {
const isValid = await formData.doAllValidate()
console.log('submit:isValid: ', isValid)
if (isValid) {
console.log('formValue', formData.value)
}
}
return (
<div className="p-10 pt-18 pb-0 flex-col">
<Input
placeholder="请输入账户"
// // 注释掉原有绑定逻辑
// value={formData.value.username}
// onChange={(e) => formData.pushValue('username', e.target.value)}
// isInvalid={formData.errors.username?.isInvalid}
// errorMessage={formData.errors.username?.msg}
// 替换为快速绑定
// NextUI.N_Input属于针对[NextUI.Input]的单独适配,其他组件正在补充中
// 开发者也可以自行在项目中补充第三方组件,具体请看开发者文档(待补充)
{...attr('username', attr.NextUI.N_Input)}
></Input>
<Input
autoComplete="new-password"
type="password"
placeholder="请输入登录密码"
{...attr('password', attr.NextUI.N_Input)}
// value={formData.value.password}
// isInvalid={formData.errors.password?.isInvalid}
// errorMessage={formData.errors.password?.msg}
// onChange={(e) => formData.pushValue('password', e.target.value)}
></Input>
<Button onClick={submit}>登录</Button>
</div>
)
}
新增一个 hook useSubFormData用于处理嵌套表单，原则上可以处理任意层数的对象嵌套（也就是无限套娃）。
// useSubFormData
const value10Form = useSubFormData(formData.formData, 'value10', {
haha: [Verifications.required(), Verifications.email()]
})
/**
* 嵌套对象的表单组件需要用它来绑定
*/
const attrValue10 = useAttr(value10Form)
// 提交
const submit = async () => {
const isValid = await formData.doAllValidate()
// 嵌套表单需要单独验证
const isValidValue10 = await value10Form.doAllValidate()
console.log('submit:isValid: ', isValid, isValidValue10)
if (isValid && isValidValue10) {
//顶层form能拿到所有value
console.log('formValue', formData.value)
}
}
// 重置
const reset = () => {
formData.reset()
// 错误状态得单独重置
value10Form.formErrors.reset()
}
Next 后续版本计划
hook-form-react模块化且足够轻量(10k左右),可满足在小程序中使用, 后续会考虑Taro小程序组件库的适配.hook-form-react 在新增第三方组件库适配、新增自定义验证都是一件简单的事情, 后续将会持续完善开发文档, 以帮助开发者基于项目需求定制的使用hook-form-react.v2.3.0
MUI组件库适配, 使用请看 示例v2.2.0
Next UI、Antd 两个组件库), import { Antd_5 } from 'hook-form-react/Antd_5',对于antd的适配的所有内容都包含在这里，和核心库隔离。使用示例请参考 示例:Stackblitzv2.1.0
doValidateImme doAllValidateImme，当发现使用doValidate,doAllValidate存在问题时，相应替换一下对应的方法，原则上推荐优先使用doValidate,doAllValidate。v2.0.2
execute?: (value: V, content: any) => Promise<boolean> ，添加content参数用于获取表单上下文数据v2.0.0
v1.0.0
v0.5.x (底层实现预览)
【90 分】 NextUI 体验良好，且有问题会及时修复（自己也在用）
【80 分】 MUI 在 MUI 自己不支持表单验证的前提下，使用 hook-form-react 也是不会错的，至少相对于 react-hook-form，它没有一堆复杂的概念不是吗。
【80 分】 Antd 组件自有表单使用体验不错的，优选选自有表单吧，（后续适配主要考虑双组件库情况）。
【60 分】 ......
本节应详细介绍库中提供的 Hooks、函数及其参数、返回值类型和使用示例，以便开发者能够快速上手并有效利用库的功能。
我们欢迎并鼓励社区成员对本项目做出贡献，无论是通过提交错误报告、功能请求还是直接提交代码。请参阅我们的贡献指南了解更多信息。
该项目采用 MIT 许可证，详情请见LICENSE文件。
Generated using TypeDoc