介绍
refova 是一个基于 React 的表单验证库，它支持常用的表单验证规则，并且易于扩展自定义规则。本文将介绍 refova 的使用方法。
安装
使用 npm 安装 refova：
--- ------- ------ ------
使用方法
在 React 组件中使用 refova：
------ ----- ---- --------
------ - ------- - ---- ---------
-------- ------------- -
----- - ------ ------------- ------------- ---------- - - ---------
-------------- -
--------- ---
--------- ---
---------------- ---
------ ---
--
----------------- -
--------- -
--------- -----
---------- --
--
--------- -
--------- -----
---------- --
--
---------------- -
--------- -----
-------- -----------
--
------ -
--------- -----
------ -----
--
--
---------------- -
--------------------
--
---
------ -
----- ------------------------
------
-----------
---------------
-----------------------------
-----------------------
-------------------
--
---------------------- -- -----------------------------------
------
---------------
---------------
-----------------------------
-----------------------
-------------------
--
---------------------- -- -----------------------------------
------
---------------
----------------------
------------------------------------
-----------------------
-------------------
--
----------------------------- -- ------------------------------------------
------
------------
------------
--------------------------
-----------------------
-------------------
--
------------------- -- --------------------------------
------- -----------------------------
-------
--
-API
useForm(config)
useForm 是一个 React Hook，用于创建表单管理器，接受一个参数：
config
initialValues: Object- 表单初始值，默认为{}。validationSchema: Object- 表单验证规则，详见下一节。onSubmit: Function- 提交时触发的回调函数。
useForm 返回一个包含以下成员的对象：
state: Object- 当前表单状态，包含以下属性：values: Object- 当前表单值。errors: Object- 当前表单错误，属性名为表单项名，属性值为错误信息，如果属性不存在表示该表单项没有错误。touched: Object- 当前表单项是否被访问过，属性名为表单项名，属性值为布尔值。submitting: Boolean- 当前是否正在提交表单。
handleChange: Function- 表单项值变化的回调函数。handleSubmit: Function- 表单提交的回调函数。handleBlur: Function- 表单项失去焦点的回调函数。
验证规则
refova 支持以下验证规则：
required- 必填。minLength(n: number)- 最小长度为n。maxLength(n: number)- 最大长度为n。email- 邮箱格式。matches(key: string)- 与另一个表单项的值相同。
结语
refova 是一个轻量级的表单验证库，它足够简单易用，但又能够满足常用的表单验证需求。如果你正在寻找一款表单验证库，不妨试试 refova。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/60055fd581e8991b448dd60d