表单验证 react_如何使用React处理表单和验证?-程序员宅基地

技术标签: ViewUI  python  java  vue  golang  react  

表单验证 react

总览

处理表单是Web应用程序极为常见的用例。 在本文中,让我们探索使用React而不使用第三方库来处理表单输入和验证的方法。

要求

我们将介绍适用于大多数用例的最受欢迎的功能:

  • 使用表单的组件的onSubmit回调。
  • 验证单个输入(仅前端)。
  • 验证onSubmit而不是onBlur
  • 重置表格。

它是如何工作的?

我们将创建一个Form上下文,该上下文将保存所有状态并为所有Form输入定义所有状态交互。

装入输入时,在这些输入中传递的某些信息将用于提供给Form上下文。

当表单上下文中的输入更改时,它将向表单上下文提交其新值。 表单上下文接收值并将其状态更改为新值,并将其向下传递到输入(受控输入)。

提交表单后,它将运行输入装入时注册的所有验证,并为特定字段设置错误。 然后,这些将被向下传递到正确的输入并进行相应渲染。

下图总结了每种类型的组件的职责。

实作

表格状态

该表格状态需要能够容纳3条信息:

  • 表单数据-用于用户的输入数据。
  • 验证-用于特定领域的验证。
  • 错误-特定于字段的错误。

我认为该对象应该足够使用。

const FORM_STATE = {
  data : {},
  validators : {},
  errors : {},
};

我们还将约定,每个输入必须具有唯一的名称prop来标识自己。 这类似于常规HTML5表单<input>具有name属性的方式。

名称的唯一性很重要,因为我们将在状态结构中将它们用作键。

例如,名称为first_name的输入将存储在FORM_STATE ,如下所示:

{
    
     data : {
    first_name : "John" ,
  },
  validators : {
    first_name : [fn()],
  },
  errors : {
    first_name : [ "error message" ],
  }
}

表单上下文

要将表单状态和方法注入到每个想要订阅的组件中,我们将使用上下文提供者模式。 您可以在此处阅读有关上下文的更多信息。

在我的理解中,上下文是一个包装器,它将道具注入到通过消费者订阅的任何子组件中。 有一种使用useContext钩子订阅上下文的便捷方法。

我们还将创建一个HOC,将上下文订阅逻辑封装在一个地方,以便我们的输入尽可能是纯UI。 换句话说,输入是表示性组件,只会听取道具更改。 表单上下文是包含大多数逻辑的容器。

表格方法

让我们逐步了解表单上下文的行为。

注册

装入输入时,应在表单上下文中注册自己。 在注册时,我们只需从输入中复制验证器,以将其存储在表单上下文中。

卸载输入时,我们应清除其验证,错误以及与该输入关联的所有数据。 这是注册功能。

const registerInput = ( { name, validators } ) => {
    setFormState( state => {
      return {
        ...state,
        validator
版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/dfsgwe1231/article/details/107259077

智能推荐

vue实现图片3D旋转效果_vue 图片旋转-程序员宅基地

文章浏览阅读2.5k次。vue实现图片3D旋转效果(点击一次停止,再次点击继续,双击图片放大,再次双击大图消失)_vue 图片旋转

强化学习笔记【6】DQN基本概念_dqn 中的状态是什么-程序员宅基地

文章浏览阅读685次。该系列主要是听李宏毅老师的《深度强化学习》过程中记下的一些听课心得,除了李宏毅老师的强化学习课程之外,为保证内容的完整性,我还参考了一些其他的课程,包括周博磊老师的《强化学习纲要》、李科浇老师的《百度强化学习》以及多个强化学习的经典资料作为补充。使用说明笔记【4】到笔记【11】为李宏毅《深度强化学习》的部分;笔记 【1】和笔记【2】根据《强化学习纲要》整理而来;笔记 【3】和笔记【12】根据《百度强化学习》整理而来。Q-learning是基于价值的强化学习方法,我们要学习的不是策略而..._dqn 中的状态是什么

转自王道论坛-程序员宅基地

文章浏览阅读551次。[size=small]2009年参加硕士生入学考试已经结束了,初试计算机专业基础141,总成绩403分。我被清华大学计算机系网络研究所录取。在王道一直潜水的,出来发一贴,感谢王道。一.准备工作(3月到5月)选择报考的学校: 人人对于考研的看法都不一样,恐怕每一个要考研的人最想问的一个问题就是考研难吗?我的感觉是考研比高考要简单。我举几个计算机比较牛的学校,想分三个层次说明一..._王道毕业设计论坛可靠吗

jQuery验证控件jquery.validate.js使用说明+中文API_validate.js 中文 api 手册-程序员宅基地

文章浏览阅读2k次,点赞2次,收藏3次。官网地址:点击打开一、导入js库&lt;script src="../js/jquery.js" type="text/javascript"&gt;&lt;/script&gt;&lt;script src="../js/jquery.validate.js" type="text/javascript"&gt;&lt;/script&gt;二、默_validate.js 中文 api 手册

最新destoon 模板标签大全_destoon新的留言表/home.php-程序员宅基地

文章浏览阅读4.9k次。1.全局标签网站名称:{$DT[sitename]}网站地址:{DT_PATH}网站LOGO: {if $MODULE[$moduleid][logo]}{DT_SKIN}image/logo_{$moduleid}.gif{elseif $DT[logo]}{$DT[logo]}{else}{DT_SKIN}image/logo.gif{/if}版权信息:{$DT[copyrig_destoon新的留言表/home.php

linux版笔记本如何装win10,Linux系统的笔记本是什么样的?如何装Win10?这里给你详细解答...-程序员宅基地

文章浏览阅读325次。原标题:Linux系统的笔记本是什么样的?如何装Win10?这里给你详细解答今年,华为/荣耀推出了第三方Linux版本的笔记本,很多小白对此一头雾水,纷纷表示看不明白,我们在微信后台也收到了非常多的提问,比如:Linux版是什么意思?和普通版有什么区别等等。最近我们也拿到了一款原滋原味的Linux发行版笔记本——新款荣耀MagicBook 14,就以它为例,和大家聊聊Linux系统版笔记本到底是怎...

随便推点

python版 MOTChallengeEvalKit 评估工具运行,运行MOT评估工具_多目标跟踪 评估工具 下载-程序员宅基地

文章浏览阅读1.6k次,点赞2次,收藏29次。@多目标跟踪MOT评估工具的使用MOT官网 评估工具下载地址https://github.com/dendorferpatrick/MOTChallengeEvalKit下载跟踪后的结果results(以MOT17为例)安装matlab2020a,网上有很多安装教程,可自行查找因为要Python和matlab混编,故先创建环境。目前matlab2020a最高支持python3.7版本,用conda创建python3.7环境conda create -n python3.7 python=3_多目标跟踪 评估工具 下载

Cannot run program "svn" (in directory "E:\phpStudy\WWW\nov"): CreateProcess error=2, 系统找不到指定的文件ps_phpstrom运行显示找不到文件-程序员宅基地

文章浏览阅读2.4k次。Cannot run program “svn” (in directory “E:\phpStudy\WWW\nov”): CreateProcess error=2, 系统找不到指定的文件。phpstorm一般遇到phpstorm出现SVN部署问题的时候,会碰到两种情况,第一种就是常见的(废话不多说上图):取消勾选就可以了。不过重点来了,今天我碰到了第二种情况,就是在我把phpstorm卸..._phpstrom运行显示找不到文件

JS-Promise(使异步操作同步执行)-程序员宅基地

文章浏览阅读3.4k次。单个异步操作同步<div id="box"></div><script> var box = document.querySelector('#box') var p = new Promise(function(resolve, reject){ setTimeout(function(){ box.innerHTML..._js 怎么实现异步promise 转同步 通过异常

LeetCode 图相关知识_leetcode 邻接矩阵-程序员宅基地

文章浏览阅读194次。图论知识点众多,LeetCode最常涉及的便是有向图与无向图的遍历算法。例如下有向图,使用 邻接矩阵 与 邻接表 存储。邻接矩阵使用N*N的二维数组存储,a[i][j] = 1意思着 i -> j存在连接,也可以用来存权。邻接表使用N个元素的一维数组分别存储一个列表,列表中存储与第i个元素相连的所有元素。构造邻接矩阵与邻接表 构造邻接矩阵 public int[][] assemMap(){ ..._leetcode 邻接矩阵

微信公众号敏感词检测工具-程序员宅基地

文章浏览阅读8.4k次。在写文章的时候,会遇到以下3种情况:1、你所编辑的图文消息可能含有敏感内容,你可以继续保存或发布该图文消息(发布等待时长约3-4小时),若保存或发布后,经核实含有敏感内容的,将可能被作删除、屏蔽等处理。查看对应规则2、你所编辑的图文消息可能含有涉嫌不当使用国家机关、国家机关工作人员的名义或形象的表述内容,包括但不限于姓名、缩写、代指名称等,你可以继续保存或发布该图文消息,若保存或发布后..._微信公众号名称检测

cardview及下定义scrollview实现下拉头部放大_cardview scrollview-程序员宅基地

文章浏览阅读449次。看别人代码实现的,记录一下,下次方便使用_cardview scrollview