React Hook Form 表单校验库

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;