简介
@aurochses/forms 是一个基于 React 的表单库，能够帮助开发者快速、方便地构建表单，并提供了大量常用的表单元素以及灵活的配置选项。
安装
使用 npm 安装：
npm install @aurochses/forms
或者使用 yarn 安装：
yarn add @aurochses/forms
使用
引入
在 React 组件中引入表单库：
-- -------------------- ---- -------
------ ----- ---- --------
------ - ----- ----- - ---- -------------------
-------- -------- -
------ -
------
------ ----------- ---------- --
------ ---------- ---------- --
-------
--
-表单元素
@aurochses/forms 提供了常用的表单元素，如文本框、下拉框、单选框、多选框等。可以通过 Field 组件来使用这些元素。
文本框
使用 input 元素实现，可以通过 type 属性指定具体的类型，如 text、password、email、number 等。
<Field name="username" label="用户名" type="text" /> <Field name="password" label="密码" type="password" />
下拉框
使用 select 元素实现，需要提供一个 options 数组来指定选项。
const genderOptions = [
{ label: '男', value: 'male' },
{ label: '女', value: 'female' },
];
<Field name="gender" label="性别" type="select" options={genderOptions} />单选框
使用 input 元素和 label 元素实现，需要提供一个 options 数组来指定选项。
const fruitOptions = [
{ label: '苹果', value: 'apple' },
{ label: '香蕉', value: 'banana' },
{ label: '橘子', value: 'orange' },
];
<Field name="fruit" label="喜欢的水果" type="radio" options={fruitOptions} />多选框
使用 input 元素和 label 元素实现，需要提供一个 options 数组来指定选项。
const sportOptions = [
{ label: '足球', value: 'football' },
{ label: '篮球', value: 'basketball' },
{ label: '乒乓球', value: 'pingpong' },
];
<Field name="sports" label="喜欢的运动" type="checkbox" options={sportOptions} />表单验证
@aurochses/forms 提供了强大的表单验证功能，可以对表单元素进行有效性验证，并且支持自定义验证规则。
验证规则
@aurochses/forms 内置了一些常见的验证规则，如 required、email、url、number 等，可以通过在 options 对象中指定 rules 数组来启用验证规则。
-- -------------------- ---- ------- ------ ------------ ---------- ----------- ---------- ------ ------------ -------- -- -- ------ ---------- ---------- ------------- ---------- ------ ------------ - ----- --------- ---- -- ---- --- ----
自定义规则
可以通过 validator 函数来定义自己的验证规则。validator 函数接受两个参数：value 和 options，其中 value 是当前元素的值，options 是该元素的所有配置选项，包括 rules 数组。
-- -------------------- ---- -------
-------- ------------------ -------- -
-- ------------------------------- -
------ -----------
-
-
------
---------------
-----------
-----------
---------- ------ ------------- --
--表单提交
@aurochses/forms 提供了 onFormSubmit 事件来处理表单提交事件。onFormSubmit 事件接受一个回调函数作为参数，该回调函数会接受一个表单数据对象作为参数，可以在该回调函数中进行表单数据处理、验证等操作。
function handleSubmit(formData) {
console.log(formData);
}
<Form onFormSubmit={handleSubmit}>
{/* 表单元素 */}
</Form>示例代码
-- -------------------- ---- -------
------ ----- ---- --------
------ - ----- ----- - ---- -------------------
-------- -------- -
-------- ---------------------- -
----------------------
-
----- ------------- - -
- ------ ---- ------ ------ --
- ------ ---- ------ -------- --
--
----- ------------ - -
- ------ ----- ------ ------- --
- ------ ----- ------ -------- --
- ------ ----- ------ -------- --
--
----- ------------ - -
- ------ ----- ------ ---------- --
- ------ ----- ------ ------------ --
- ------ ------ ------ ---------- --
--
-------- ------------------ -------- -
-- ------------------------------- -
------ -----------
-
-
------ -
----- ----------------------------
------ ----------- ---------- --
------ ---------- ---------- ------------- --
------ ------------- ---------- ------------- ----------------------- --
------ ------------ ------------- ------------ ---------------------- --
------ ------------- ------------- --------------- ---------------------- --
------ --------------- ----------- ----------- ---------- ------ ------------- -- --
------
------------
----------
-----------
---------- ------ ------------ -------- --
--
------- -------------------------
-------
--
-总结
@aurochses/forms 是一个方便、灵活、强大的 React 表单库，能够大大提高开发效率，让开发者更加专注于业务逻辑的实现。同时，@aurochses/forms 基于 React，所以在使用上也具有很高的可扩展性和灵活性。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60059f6781e8991b448ed4e1