专栏首页React App && Python FlaskReact Hook form 表单校验
原创

React Hook form 表单校验


layout: post

title: React Hook form 表单校验

date: 2019-10-07

author: 霁

header-img:

catalog: true

categories:

  • 学习
  • React tags:
  • React

需求

在项目里需要进行表单的校验。

而在react里处理表单又是非常难受的一件事。

要么我们使用受控组件,要么一个一个获取。。。

而现在我就要介绍一款,react hook 的表单校验库。

官网:react-hook-form

真的非常好用,个人觉得。

原生input,form多好啊。也可以结合ant 等的表单进行使用,更多的校验规则也可以指定别的库。

更多api可以查看官网。下面就描述一下怎么使用,以及做一个带校验密码是否一致的注册表单。

妙的是,可以直接返回一个回调函数让我们进行整个被注册表单元素的所有键值对象

{name:,value:}

我们需要编写函数进行提交就ok。

uvJayq.png

开始

安装

yarn add react-hook-form

使用

在register表单里引入

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

import Toast from './Toast';

在组件里进行声明

const {register,handleSubmit,errors,watch,clearError} =  useForm();

介绍一下分别是什么吧,

register 使用一个ref进行 需要使用校验的表单元素。name属性是必须的。

比如注册一个input

<input 
type="text" 
name="username" 
id="username" 
placeholder="username" 
aria-describedby="helpId" 
ref={register({
    required:true,
    maxlength: 6,
    minLength:2,
})}/>
{errors.username&&Toast.error('2-6字符')}

使用ref进行这个input框的注册,

并且指定它的一些校验规则:可以是一个验证规则,也可以是一个正则表达式,

包括一些原生的校验。最大最小什么的。

如果不通过验证就会返回一个错误对象。

我们要使用这个错误对象,需要通过使用name属性来获取对应的错误消息。

我们可以进行错误的设置,也可以进行错误的清除。

因为存在setErrorclearError

然后我们再把错误消息渲染出来提示就好了。

校验指定

指定邮箱的input类型好像默认会使用邮箱的校验错误提示而不出现自定义提示???

暂时不想了。

指定一个正则来校验邮箱格式:。

pattern:/^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,4}$/i,

校验一个密码框和一个确认密码框。

主要是使用watch("input_name") 来返回值,

根据校验validate使用自身value跟监听的ref的input的值进行比较。

validate:{
    // 设置validate返回的message
    message:value=>
    value===watch('password')?
        clearError()://两个表单值一样的时候清除错误
    "confirm password fail",//否则返回一个指定的错误消息
}}

表单提交

handleSubmit接受一个函数返回表单的值。

都能拿到所有值了,可以进行操作提交了吧。使用什么ajax啦axios的。

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

指定onSubmit事件。

<form className="form" onSubmit = {handleSubmit(onSubmit)}>
    <div className="form-item">
        <button className="form-btn" type="submit">注册</button>
    </div>
    {props.children}
</form>

最后的代码是这样:

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

import Toast from './Toast';


export default function RegisterForm(props) {

    const {register,handleSubmit,errors,watch,clearError} =  useForm();

    const onSubmit = data =>{
        console.log(data);
        JSON.stringify(data);
        console.log(data);
    }
    return (
        <form className="form" onSubmit = {handleSubmit(onSubmit)}>
            <div className="form-item">
                <input 
                    type="text" 
                    name="username" 
                    id="username" 
                    placeholder="username" 
                    aria-describedby="helpId" 
                    ref={register({
                        required:true,
                        maxlength: 6,
                        minLength:2,
                    })}/>
                {errors.username&&Toast.error('2-6字符')}
            </div>
            <div className="form-item">
                <input 
                    type="email" 
                    name="email" 
                    id="email" 
                    placeholder="email" 
                    aria-describedby="helpId" 
                    ref={register({
                        required:true,
                        pattern:/^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,4}$/i,
                    })}/>
                {errors.email&&Toast.error('请输入正确的邮箱格式')}
            </div>
            <div className="form-item">
                <input 
                    type="password" 
                    name="password" 
                    id="password" 
                    placeholder="password" 
                    aria-describedby="helpId" 
                    ref={register({
                        required:true,
                        maxLength:16,
                        minLength:6,
                    })}/>
                {errors.password&&Toast.error('6-16字符')}
            </div>
            <div className="form-item">
                <input 
                    type="password" 
                    name="confirm_password" 
                    id="password" 
                    placeholder="confirm password" 
                    aria-describedby="helpId" 
                    ref={register({
                        required:true,
                        validate:{message:value=>value===watch('password')?clearError():"confirm password fail",}
                    })}/>
                {errors.confirm_password&&Toast.error(errors.confirm_password.message)}
            </div>
            <div className="form-item">
                <div className="checkbox-item box">
                    <div className="checkbox-group">
                        <input 
                            type="checkbox" 
                            id="agree"
                            name="agree"
                            ref={register({
                                required:true
                            })}/>
                        <label htmlFor="agree" className="checkbox">同意用户协议</label>
                        {errors.agree&&Toast.error('请选择同意用户协议')}
                    </div>
                    <Link to="./login">已有帐号?去登录</Link>
                </div>
            </div>
            <div className="form-item">
                <button className="form-btn" type="submit">注册</button>
            </div>
            {props.children}
        </form>
    )
}

原创声明,本文系作者授权云+社区发表,未经许可,不得转载。

如有侵权,请联系 yunjia_community@tencent.com 删除。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 推荐十一个React Hook库

    在React开发中,保持干净的代码风格,可读性,可维护性,更少的代码行以及可重用性至关重要。本篇文章将向您介绍应立即开始使用的十一个React Hook库。不用...

    用户3806669
  • React 组件化开发(二):最新组件api

    如果连这点觉悟都没有,那就不是一个合格的程序员。而雇主的本质是逐利,最忌讳的是重构,这个问题可以请高水平的工程师来得到缓解,但不可能彻底解决。

    一粒小麦
  • iview form表单数值类型校验「iview自定义form表单校验器」- niceyoo

    Form 组件基于 sync-validator 实现的数据验证,给 Form 设置属性 rules,同时给需要验证的 FormItem 设置属性 prop 指...

    niceyoo
  • React form 表单组件的解决方案

    一直以来,表单对于前端来说都是一个不得不面对的坑。而对于设计一个表单组件来说,主要需要考虑以下三点:

    IMWeb前端团队
  • React: hooks 该怎么优雅的获取数据

    ))} ); } export default App;

    西南_张家辉
  • 【React深入】从Mixin到HOC再到Hook(原创)

    前端发展速度非常之快,页面和组件变得越来越复杂,如何更好的实现 状态逻辑复用一直都是应用程序中重要的一部分,这直接关系着应用程序的质量以及维护的难易程度。

    ConardLi
  • React:redux-form 应用示例

    redux-form 提供了一堆 selector,便于我们从state中获取 form 表单的各种状态数据...

    WEBJ2EE
  • 一篇看懂 React Hooks

    React Hooks 是 React 16.7.0-alpha 版本推出的新特性,想尝试的同学安装此版本即可。

    前端迷
  • 【技术篇】如何搞定react组件化

    在主流前端框架里,因为React的入门难度高而果断投入Vue怀抱的人绝不在少数。但我要告诉大家,如果你有一定的js基础,其实React没你想象中那么困难

    前端迷
  • 我打破了 React Hook 必须按顺序、不能在条件语句中调用的枷锁!

    这个限制在开发中也确实会时常影响到我们的开发体验,比如函数组件中出现 if 语句提前 return 了,后面又出现 Hook 调用的话,React 官方推的 e...

    JowayYoung
  • 精读 React 高阶组件

    高阶组件( higher-order component ,HOC )是 React 中复用组件逻辑的一种进阶技巧。它本身并不是 React 的 API,而是一...

    前端迷
  • React Hooks 学习笔记 | State Hook(一)

    React Hooks 无疑是目前 React 最令人兴奋着迷的特性之一,你可以使用更简单的函数编程的思维创建更加友好的组件。以往只有类组件才有状态管理和各种...

    前端达人
  • React教程:4 个 useState Hook 示例

    到 React 16.8 目前为止,如果编写函数组件,然后遇到需要添加状态的情况,咱们就必须将组件转换为类组件。

    Fundebug
  • Redux with Hooks

    React在16.8版本为我们正式带来了Hooks API。什么是Hooks?简而言之,就是对函数式组件的一些辅助,让我们不必写class形式的组件也能使用st...

    腾讯IVWEB团队
  • Element Form表单含有嵌套的数据校验

    tianyawhl
  • Svelte 3 快速开发指南(对比React与vue)[每日前端夜话0x83]

    Svelte 3 Tutorial For The Impatient Developer (2019)

    疯狂的技术宅
  • Antd Form 实现机制解析

    首先我们先看一个简单的表单,收集并校验两个组件的值。只需要通过监听两个表单组件的 onChange 事件,获取表单项的 value,根据定义的校验规则对 val...

    政采云前端团队
  • 第八篇:深入 React-Hooks 工作机制:“原则”的背后,是“原理”

    React 团队面向开发者给出了两条 React-Hooks 的使用原则,原则的内容如下:

    越陌度阡
  • 4 个 useState Hook 示例

    到 React 16.8 目前为止,如果编写函数组件,然后遇到需要添加状态的情况,咱们就必须将组件转换为类组件。

    前端小智@大迁世界

扫码关注云+社区

领取腾讯云代金券