介绍
refova 是一个基于 React 的表单验证库,它支持常用的表单验证规则,并且易于扩展自定义规则。本文将介绍 refova 的使用方法。
安装
使用 npm 安装 refova:
npm install refova --save
使用方法
在 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