学习
实践
活动
工具
TVP
写文章
专栏首页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>
    )
}

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

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

登录 后参与评论
0 条评论

相关文章

  • 快来使用 React-Hook-Form 搭建强大的React表单

    在React中构建表单时,必须使用一个表单库,该库提供了许多方便的工具,而且不需要太多代码。

    前端修罗场
  • iview form表单数值类型校验「iview自定义form表单校验器」- niceyoo

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

    niceyoo
  • React Hook完成登录表单

    用react hook完成登录表单有两种方式,在进行表单处理的过程中,最让人感觉麻烦的是字段的设置,字段越多开发起来越麻烦,首先来说一下第一种方式,也是最常规的...

    挥刀北上
  • Element Form表单含有嵌套的数据校验

    tianyawhl
  • Form 表单在数栈的应用(上): 校验篇

    本文的重点为 Form 表单的校验及在数栈中的应用,偏向于应用总结与心得分享。众所周知,我们生在一个最好的时代,antd 已经帮我们把绝大多数功能封装好了,即开...

    数栈DTinsight
  • React form 表单组件的解决方案

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

    IMWeb前端团队
  • Form 表单在数栈的应用(上): 校验篇

    本文的重点为 Form 表单的校验及在数栈中的应用,偏向于应用总结与心得分享。众所周知,我们生在一个最好的时代,antd 已经帮我们把绝大多数功能封装好了,即开...

    数栈DTinsight
  • React 组件化开发(二):最新组件api

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

    一粒小麦
  • 带你用React从零实现一个Antd4 Form表单

    在cms后台管理系统中,大家一定绕不开对Form表单的使用,接下来我们就来详细解析下Antd4 Form的背后实现以及数据仓库的知识。其实Form表单就做了以下...

    前端bubucuo
  • 推荐十一个React Hook库

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

    用户3806669
  • antd4与antd3Form表单设计区别

    antd3思想:使用HOC(高阶组件)包裹form表单,HOC组件中的state存储所有的value值,定义设置值和获取值的方法 缺点:动一发牵全身,一个va...

    用户10133417
  • 【TS】634- 让人眼前一亮的 10 大 TS 项目

    TypeScript 是一种由微软开发的自由和开源的编程语言。它是 JavaScript 的一个超集,而且本质上向这个语言添加了可选的静态类型和基于类的面向对象...

    pingan8787
  • 前端推荐!阿里高性能表单解决方案——Formily

    加强自身学习,提高自身素质。积累工作经验,改进工作方法,向周围同志学习,注重别人优点,学习他们处理问题的方法,查找不足,提高自己。

    徐小夕
  • 登录注册小案例实现(使用Django中的form表单来进行用户输入数据的校验)

    玖柒的小窝
  • 组件分享之前端组件——用于表单状态管理和验证的 React Hooks (Web + React Native)

    近期正在探索前端、后端、系统端各类常用组件与工具,对其一些常见的组件进行再次整理一下,形成标准化组件专题,后续该专题将包含各类语言中的一些常用组件。欢迎大家进行...

    cn華少
  • 登录注册小案例实现(使用Django中的form表单来进行用户输入数据的校验)

    注:虽然form可以生成前端页面,但这个功能实际用的少,主要是是用form表单的验证功能!

    玖柒的小窝
  • 组件分享之前端组件——用于从 JSON Schema 构建 Web 表单的 React 组件react-jsonschema-form

    近期正在探索前端、后端、系统端各类常用组件与工具,对其一些常见的组件进行再次整理一下,形成标准化组件专题,后续该专题将包含各类语言中的一些常用组件。欢迎大家进行...

    cn華少

扫码关注腾讯云开发者

领取腾讯云代金券