npm 包 refova 使用教程

阅读时长 5 分钟读完

介绍

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

纠错
反馈