npm 包 @zijin/form 使用教程

介绍

@zijin/form 是一个轻量级的前端表单组件库，它提供了一系列可重复利用的表单组件和相关的表单验证功能，以快速、便捷地开发前端表单为目的。

功能特性

  • 支持常见的表单控件，如输入框、下拉框、单选框、多选框等。
  • 支持表单验证，包括必填、长度、格式、逻辑检验等。
  • 支持表单数据填充和获取，以及数据校验和提交。
  • 提供了一些实用工具函数，如格式化日期、数字千位分隔等。

安装

使用 npm 安装：

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

使用

表单结构

@zijin/form 的表单结构分为 FormItem （表单项）和 Form （表单）两个组件，FormItem 包含了具体的表单控件，如 Input 、 Select 、 Checkbox 等，而 Form 则包含了一组 FormItem 以构建完整的表单。

下面是一个简单的表单例子：

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

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

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

在这个例子中，我们首先引入了 @zijin/form 组件库所提供的相关组件，然后在模板中使用 Form 和 FormItem 构建了一个包含四个表单项的表单，并使用相应的验证规则对其进行验证。最后，我们使用 Button 元素绑定了表单提交事件，使用 this.$refs.form.validate() 方法对表单进行验证并执行提交操作。

表单控件

@zijin/form 提供了一系列与表单相关的控件，下面是这些控件的介绍及使用方法。

Input

Input 是一个基于 input 元素的文本输入框控件，支持 v-model 双向绑定、输入限制等功能。

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

主要属性：

属性名 类型 默认值 描述
value、v-model string 绑定输入框的值
type string text 输入框类型，可选值：text、number、password 等
placeholder string 输入框占位符
maxLength number 最大输入长度
minLength number 最小输入长度
disabled boolean false 是否禁用输入框
readonly boolean false 是否只读

Select

Select 是一个下拉框控件，支持单选和多选两种模式，同时支持搜索和远程数据加载等高级功能。

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

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

主要属性：

属性名 类型 默认值 描述
value、v-model string / array 绑定下拉框的值，当 multiple 为 true 时，绑定值为数组
options array 下拉框的选项，每个选项包含 value 和 label 两个属性
disabled boolean false 是否禁用下拉框
multiple boolean false 是否允许多选
clearable boolean false 是否允许清空选项
filterable boolean false 是否允许搜索选项
remote boolean / function false 是否需要远程数据加载，可以传入一个函数进行自定义数据加载

Checkbox

Checkbox 是一个复选框控件，支持单选和多选两种模式。

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

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

主要属性：

属性名 类型 默认值 描述
value、v-model string / array 绑定复选框的值，当 CheckboxGroup 的 v-model 绑定的是数组时，绑定值为数组
label string / number / boolean 复选框的值
disabled boolean false 是否禁用复选框

Radio

Radio 是一个单选框控件。

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

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

主要属性：

属性名 类型 默认值 描述
value、v-model string / number / boolean 绑定单选框的值
label string / number / boolean 单选框的值
disabled boolean false 是否禁用单选框

表单验证

@zijin/form 提供了一套简单但实用的表单验证机制，可以满足大部分常用场景的需求。验证规则使用数组形式定义在 Form 的 rules 属性中，数组中每个元素为一个对象，可以定义多个验证条件，如果有一个验证条件不满足，则该表单项验证失败。

规则列表

下面是 @zijin/form 支持的验证规则：

规则名 参数 描述
required - 判断字段是否必填
pattern RegExp 判断字段值是否符合指定的正则表达式
min number 判断字段值是否大于或等于指定值
max number 判断字段值是否小于或等于指定值
len number 判断字段值的长度是否等于指定值
equals string 判断字段值是否与指定值相等
type string 判断字段值的类型是否符合指定值，可选值： number、array 等

示例代码

下面是一个使用 @zijin/form 进行表单验证的例子：

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

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

总结

@zijin/form 是一个实用的前端表单组件库，它提供了丰富的表单控件和验证功能，可以帮助我们快速开发前端表单。

在使用 @zijin/form 进行表单开发时，我们首先需要了解其组件结构，并对表单控件和验证规则有一定的掌握。此外，我们还需要注意一些细节问题，如表单数据绑定、表单验证等，以保障表单的正确性和可用性。

通过本文的介绍，相信读者已经对 @zijin/form 组件库有了一定的了解，并可以从中获得一些实用的前端开发技巧和经验。

来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/600671d730d0927023822dd4

阅读全文

猜你喜欢

  • npm 包 tamu-webvr-polyfill 使用教程

    介绍 WebVR是一种支持虚拟现实和增强现实的API，可以让开发者创建可以在VR头戴式显示器和移动设备上运行的虚拟现实应用程序。tamu-webvr-polyfill 是一个能够模拟WebVR的Jav...

    4 年前
  • npm 包 react-i18n-easy 使用教程

    多语言网站（internationalization）是现代 Web 开发的必备技能，因为互联网已经不再是局限于本地的平台，而是全球性的共享平台。为了使您的网站在全球范围内受欢迎，需要为您的网站添加多...

    4 年前
  • npm 包 classeviva-api 使用教程

    简介 Classeviva-api 是一款基于 Node.js 平台的 npm 包，封装了 Classeviva 学校管理系统的 API，让开发者可以更方便地访问、读取和处理 Classeviva 系...

    4 年前
  • npm 包 generator-react-client 使用教程

    介绍 generator-react-client 是一个用于创建 React 前端项目的 npm 包。它基于 Yeoman 框架，能快速生成 React 项目的基础结构和代码，帮助开发者节省时间和精...

    4 年前
  • npm 包 filepack 使用教程

    什么是 filepack？ filepack 是一个基于 node.js 的 npm 包，它可以帮助前端开发者打包静态资源文件，并能够进行一些常见的优化操作，如压缩、打 Hash 等。

    4 年前
  • npm 包 jszpl 使用教程

    在前端开发中，我们经常需要使用一些开源的 npm 包来完成我们的业务需求。今天我要介绍的是一个名为 jszpl 的 npm 包，它是一个 JavaScript 实用工具库，提供了很多方便快捷的工具方法...

    4 年前
  • npm 包 @akankshajindal/jupyterlab_xkcd 使用教程

    前言 对于使用 Jupyter 的开发者来说，经常需要给笔记本添加一些有趣、趣味的创意，来提高其可读性。@akankshajindal 开发了 JupyterLab 的扩展程序 @akankshaji...

    4 年前
  • npm 包 ea-iview 使用教程

    简介 npm 包 ea-iview 是一个基于 iview UI 组件库的扩展组件库，该库中的组件封装了很多经验丰富的前端开发者在实际项目中遇到的经典问题的解决方案。

    4 年前
  • npm 包 ensign 使用教程

    在前端开发中，我们常常需要进行代码质量检查和测试。为了方便地完成这些任务，我们可以使用 ensign，一个基于 ESLint 的代码检测工具，它可以帮助我们检查代码的风格、语法错误和一些潜在的问题。

    4 年前
  • npm 包 jdesign 使用教程

    介绍 jdesign 是一款基于 SASS 的前端库，用于快速开发响应式网站或应用的 UI，提供了大量的可重用的组件和帮助类。jdesign 主要由两部分组成：核心的 SCSS 和内置的 JavaSc...

    4 年前
  • npm 包 fetch-mock-one.com 使用教程

    什么是 fetch-mock-one.com fetch-mock-one.com 是一个 npm 包，它可以用来模拟网络请求，方便前端开发中的单元测试、集成测试等等。

    4 年前
  • npm 包 controls-library 使用教程

    前言 npm 是 Node.js 的包管理器，可以方便地发布、安装、更新和与其他开发者共享代码包。在前端项目开发中，npm 广泛应用于第三方库的依赖管理。 控件库（controls-library）...

    4 年前
  • npm 包 @fetools/ali-oss-put 使用教程

    简介 @fetools/ali-oss-put 是一个基于阿里云 OSS API 封装的 npm 包，用于前端上传文件到 OSS 上的工具库，支持文件分片上传、进度条显示等功能。

    4 年前
  • npm包 @mikailbayram/serviceroller-calendar使用教程

    在前端开发中，我们经常需要使用日历插件来展示时间信息。今天，我将向大家介绍一款npm包@ mikailbayram /serviceroller-calendar，它可以快速而简便地生成一个具有丰富功...

    4 年前
  • npm 包 @tilia/tilia 使用教程

    简介 @tilia/tilia 是一个基于 Vue.js 的轻量级组件库，提供了各种常用的前端 UI 组件，包括按钮、输入框、表格等等。它的使用非常方便，只需要通过 npm 安装即可使用。

    4 年前
  • npm 包 @markonis/clean-text-editor 使用教程

    在前端开发中，经常需要进行文本编辑操作。而 @markonis/clean-text-editor 是一个极其简洁的 JavaScript 库，它提供了一个可配置的文本编辑器，可以轻松地对文本进行编辑...

    4 年前
  • npm 包 iview-copy 使用教程

    iview-copy 是一个基于 Vue.js 和 iViewUI 的复制指令。它可以轻松地将文本或图片复制到剪贴板中，并且支持自定义复制成功或者失败后的提示信息。

    4 年前
  • npm 包 redux-socket-auth 使用教程

    前言 在现今的 Web 开发中，前端框架和工具层出不穷。其中，React 和 Redux 已经成为了非常流行的前端框架。可以说，Redux 是一个状态管理器，统一了整个应用程序的数据管理。

    4 年前
  • npm 包 socketio-over-nodejs 使用教程

    在前端开发中，我们经常需要进行实时通信，比如聊天室、实时游戏等等。而 socket.io 是一个非常好用的实时通信库，可以在浏览器和服务器之间建立一个双向的实时通信管道。

    4 年前
  • npm 包 key-flags-dictionary 使用教程

    在前端开发中，我们经常需要使用键值对来存储数据或配置信息，但是手动维护键名常常容易出错或遗漏，因此我们需要一个能够快速自动生成键名的工具。今天，我要介绍的是一个基于 npm 包的工具——key-fla...

    4 年前

相关推荐

    暂无文章