React Hook Form 表单校验库

作者: tww844475003 分类: 前端开发 发布时间: 2021-06-22 22:30

React 表单校验库

React Hook Form是一个高性能、灵活、易拓展、易于使用的表单校验库,用于React Web&Native的表单验证。

特性

  • 使创建表单和集成更加便捷
  • 非受控表单校验
  • 以性能和开发体验为基础构建
  • 迷你的体积而没有其他依赖
  • 遵循 html 标准进行校验
  • 与 React Native 兼容
  • 支持Yup, Joi, Superstruct或自定义
  • 支持浏览器原生校验
  • 从这里快速构建你的表单

原生表单中应用

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

function CustomForm() {
  const { register, handleSubmit, formState: { errors } } = useForm({
    defaultValues: {
      name: '初始值',
      sex: '1',
      address: 'shenzhen',
      like: 'read'
    },
    mode: 'onBlur'
  });

  const onSubmit = (data) => {
    console.log(data);
  }

  return (
    <div className="App">
      <form onSubmit={handleSubmit(onSubmit)}>
        <div>
          <label htmlFor="name">姓名</label>
          <input
            placeholder="请输入姓名"
            {...register("name", { required: true })}
          />
          {errors.name && <p>姓名不能为空</p>}
        </div>

        <div>
          <label htmlFor="sex">性别</label>
          <input type="radio" {...register("sex")} value="1" />&ensp;男&ensp;&ensp;&ensp;&ensp;
          <input type="radio" {...register("sex")} value="0" />&ensp;女
        </div>

        <div>
          <label htmlFor="address">城市</label>
          <select {...register("address")} style={{width: '200px', height: '30px'}}>
            <option value="shenzhen">深圳</option>
            <option value="shanhai">上海</option>
          </select>
        </div>

        <div>
          <label htmlFor="like">喜好</label>
          <input type="checkbox" {...register("like")}  value="run" />&ensp;跑步&ensp;&ensp;&ensp;&ensp;
          <input type="checkbox" {...register("like")}  value="read" />&ensp;读书
        </div>

        <input type="submit" />
      </form>
    </div>
  )
}

export default CustomForm;
前端开发那点事
微信公众号搜索“前端开发那点事”

如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续创作!

发表回复

您的电子邮箱地址不会被公开。 必填项已用*标注