react-hook-form

<div align="center"> <a href="https://react-hook-form.com" title="React Hook Form - 简单的 React 表单验证"> <img src="https://yellow-cdn.veclightyear.com/2b54e442/583d5738-63d6-4c3d-9cfb-78fc37fa1dd7.png" alt="React Hook Form 标志 - React hook 自定义 hook 用于表单验证" /> </a> </div> <div align="center">

</div> <p align="center"> <a href="https://react-hook-form.com/get-started">开始使用</a> | <a href="https://react-hook-form.com/docs">API</a> | <a href="https://react-hook-form.com/form-builder">表单构建器</a> | <a href="https://react-hook-form.com/faqs">常见问题</a> | <a href="https://github.com/react-hook-form/react-hook-form/tree/master/examples">示例</a> </p>

特性

• 注重性能、用户体验和开发体验
• 拥抱原生 HTML 表单验证
• 开箱即用的UI 库集成
• 体积小且无依赖
• 支持 Yup、Zod、AJV、Superstruct、Joi 及其他

安装

npm install react-hook-form

快速开始

import { useForm } from 'react-hook-form';

function App() {
  const {
    register,
    handleSubmit,
    formState: { errors },
  } = useForm();

  return (
    <form onSubmit={handleSubmit((data) => console.log(data))}>
      <input {...register('firstName')} />
      <input {...register('lastName', { required: true })} />
      {errors.lastName && <p>请填写姓氏。</p>}
      <input {...register('age', { pattern: /\d+/ })} />
      {errors.age && <p>请输入有效的年龄。</p>}
      <input type="submit" />
    </form>
  );
}

<a href="https://ui.dev/bytes/?r=bill"> <img src="https://yellow-cdn.veclightyear.com/2b54e442/f74bb4c2-0358-47c4-9c46-f6d696c21ff4.jpeg" /> </a>

赞助商

感谢这些善良可爱的赞助商！

<a target="_blank" href='https://route4me.com/'> <img width="94" src="https://yellow-cdn.veclightyear.com/2b54e442/6472ebe4-f11c-40a5-b025-35e3004f1690.png?height=256" /> </a> <a target="_blank" href='https://toss.im'> <img width="94" src="https://yellow-cdn.veclightyear.com/2b54e442/a0265a02-ecf8-4fe6-8366-68b4545aed73.png" /> </a> <a target="_blank" href='https://principal.com/about-us'> <img width="94" src="https://yellow-cdn.veclightyear.com/2b54e442/d6e93073-1903-477f-a2d8-f23a28acbffd.png?height=256" /> </a> <a target="_blank" href="https://graphcms.com"> <img width="94" src="https://avatars.githubusercontent.com/u/31031438" /> </a> <a target="_blank" href="https://www.beekai.com/"> <img width="94" src="https://yellow-cdn.veclightyear.com/2b54e442/254df2e7-7995-4eb1-84bc-446ac9986de8.svg" /> </a> <a target="_blank" href="https://kanamekey.com"> <img width="94" src="https://yellow-cdn.veclightyear.com/2b54e442/f74cad84-7b1f-49c1-8857-27f7919646d7.png" /> </a> <a target="_blank" href="https://www.casinoreviews.net/"> <img width="94" src="https://yellow-cdn.veclightyear.com/2b54e442/9900dcb0-9954-47db-b6a0-27289875b534.png" /> </a>

往期赞助商

<a href="https://www.leniolabs.com/" target="_blank"> <img src="https://yellow-cdn.veclightyear.com/2b54e442/62e28274-59ea-43ef-bc18-454573adc163.png" width="48" height="48" /> </a> <a target="_blank" href="https://underbelly.is"> <img width="48" src="https://yellow-cdn.veclightyear.com/2b54e442/9f002e99-92a4-40d3-aeb0-6913b4bc21b1.png" /> </a> <a target="_blank" href="https://feathery.io"> <img width="48" src="https://yellow-cdn.veclightyear.com/2b54e442/81ad8277-7f01-41e6-9278-59adb8087bed.png" /> </a> <a target="_blank" href="https://getform.io"> <img width="48" src="https://yellow-cdn.veclightyear.com/2b54e442/97ee945b-7b97-477e-be37-a9db6ad710c7.png" /> </a> <a href="https://marmelab.com/" target="_blank"> <img src="https://yellow-cdn.veclightyear.com/2b54e442/23b1b1f3-5688-438f-a13b-e4d7bd8469ec.png" width="48" height="48" /> </a> <a target="_blank" href="https://formcarry.com/"> <img width="48" src="https://yellow-cdn.veclightyear.com/2b54e442/8a31065f-bf63-4744-9dd1-45dbd5d929f2.png" /> </a> <a target="_blank" href="https://fabform.io"> <img width="48" src="https://yellow-cdn.veclightyear.com/2b54e442/286aa7dd-124e-43e6-981b-09a053040b13.png" /> </a> <a target="_blank" href="https://www.thinkmill.com.au/"> <img width="48" src="https://yellow-cdn.veclightyear.com/2b54e442/5855da86-2921-4139-b882-806ab7322ae2.png" /> </a> <a target="_blank" href="https://kwork.studio/"> <img width="48" src="https://yellow-cdn.veclightyear.com/2b54e442/8452ddd5-82b4-408e-a66a-a30437696bc2.png" /> </a> <a target="_blank" href="https://fiberplane.com/"> <img width="48" src="https://avatars.githubusercontent.com/u/61152955?s=200&v=4" /> </a> <a target="_blank" href="https://www.jetbrains.com/"> <img width="48" src="https://yellow-cdn.veclightyear.com/2b54e442/01b4c98f-60b4-4413-a833-e9f940f32365.png" /> </a> <a target="_blank" href="https://www.mirakl.com/"> <img width="48" src="https://yellow-cdn.veclightyear.com/2b54e442/c302fa10-b9c7-469b-9963-06888963daf7.png" /> </a> <a target="_blank" href='https://wantedlyinc.com'> <img width="48" src="https://yellow-cdn.veclightyear.com/2b54e442/1da7d8f0-4195-4cf9-b2b8-fb06be05592d.png" /> </a>

支持者

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

<a href="https://opencollective.com/react-hook-form#backers"> <img src="https://yellow-cdn.veclightyear.com/2b54e442/81829b0f-724e-4609-85fd-1b09630e8428.svg?width=950" /> </a>

贡献者

感谢这些优秀的人！[成为贡献者]

<a href="https://github.com/react-hook-form/react-hook-form/graphs/contributors"> <img src="https://yellow-cdn.veclightyear.com/2b54e442/d97cdf10-9ede-47df-b399-af7590e73acb.svg?width=890&button=false" /> </a>