npm 包 aos-forms 使用教程

阅读时长 5 分钟读完

介绍

aos-forms 是一个基于 HTML5 的表单验证库,它能够快速简单地为表单添加验证机制。不仅如此,它还有丰富的错误提示以及自定义规则的功能,使开发者可以轻松地满足不同场景的需求。

安装

使用 npm 安装 aos-forms:

使用

在 HTML 文件中引入 aos-forms:

初始化

在 JS 文件中调用初始化方法:

-- -------------------- ---- -------
----------------- -
  ------ -
    ----- -----------------
    ------ ----------------
  --
  --------- -
    ----- -
      --------- ---------
      ---- ----- - ----
    --
    ------ -
      --------- ---------
      ------ ------------
    -
  --
  ---------- -------------- -
    ------------------
  -
---

表单验证规则

aos-forms 为每个表单元素设置了一些默认的验证规则,当不提供自定义规则或仅仅需要使用这些默认规则时,可以省略该项配置。默认规则包括:

  • required:必填项
  • numeric:数字
  • integer:整数
  • float:浮点数
  • min:最小值(适用于数字、字符串)
  • max:最大值(适用于数字、字符串)
  • email:邮箱地址
  • url:URL 地址
  • date:日期(格式 yyyy-mm-dd)
  • time:时间(格式 hh:mm:ss)
  • datetime:日期时间(格式 yyyy-mm-dd hh:mm:ss)
  • match:匹配指定元素的值
  • ip:IP 地址

自定义规则

除了默认规则外,aos-forms 还允许开发者自定义规则。自定义规则需要在初始化时传递一个对象,对象的 key 为规则名,value 为规则函数。规则函数接受表单元素的值作为参数,并且返回一个布尔值,表示验证结果。

-- -------------------- ---- -------
----------------- -
  ------ -
    -------- ------------- -
      ------ --------------------
    -
  --
  --------- -
    -------- -
      --------- ---------
      -------- ----------
    -
  -
---

错误提示

aos-forms 提供了丰富的错误提示,开发者可以根据自己的需求来自定义错误提示。在初始化的配置参数中,messages 属性表示所有错误提示信息的对象,其中 key 值为表单元素的 name,value 为一个对象,其中 key 值为验证规则名,value 为该规则的错误提示信息。

-- -------------------- ---- -------
--------- -
  ----- -
    --------- ---------
    ---- ----- - ----
  --
  ------ -
    --------- ---------
    ------ ------------
  -
-

成功回调

当表单中所有元素通过验证时,可以触发一个回调函数。在初始化的配置参数中,onSuccess 属性表示成功回调函数。

-- -------------------- ---- -------
----------------- -
  ------ -
    ----- -----------------
    ------ ----------------
  --
  --------- -
    ----- -
      --------- ---------
      ---- ----- - ----
    --
    ------ -
      --------- ---------
      ------ ------------
    -
  --
  ---------- -------------- -
    ------------------
  -
---

示例代码

以下是一个完整的 aos-forms 示例代码:

-- -------------------- ---- -------
--------- -----
------
------
  ---------------- ----------
  ------- ------------------------------------------------------------
-------
------
  ----- -------------
    ------ ----------- ----------- --------------------
    ----
    ------ ----------- ------------ --------------------
    ----
    ------ ------------- -----------
  -------

  --------
    ----------------- -
      ------ -
        ----- -----------------
        ------ ----------------
      --
      --------- -
        ----- -
          --------- ---------
          ---- ----- - ----
        --
        ------ -
          --------- ---------
          ------ ------------
        -
      --
      ---------- -------------- -
        ------------------
      -
    ---
  ---------
-------
-------

总结

aos-forms 是一个功能齐全、易于使用的表单验证库。它不仅提供了默认验证规则,还允许开发者自定义规则和错误提示。在开发过程中,使用 aos-forms 可以有效地简化表单验证的工作。

来源:JavaScript中文网 ,转载请注明来源 https://www.javascriptcn.com/post/600576bd81e8991b448eab25

纠错
反馈