前言
在前端的开发过程中，表单表现形式层出不穷，而且在不同的场合下，如 PC 端、移动端、Web 页面、H5 页面等等，表单的呈现形式也不相同。但是，无论表单呈现形式如何，表单的核心业务逻辑都是相似的。所以我们最好能够编写一套通用的表单组件，可以快速的生成各种表单，并且保证表单业务逻辑的稳定。
在前端开发中，我们经常使用 NPM 包来加速我们的开发过程，有一个开源的 NPM 包叫做 ic-formable，可以帮助我们快速的生成不同类型的表单，本篇文章就是为大家介绍 ic-formable 的使用方法和相关注意事项。
简介
ic-formable 是一个基于 Vue 的表单组件库，可以快速的生成多种表单。它支持以下几种表单类型：
- 普通表单
- 内联表单
- 水平表单
- 复杂表单
ic-formable 同时支持表单项的校验和错误提示功能，以及表单提交前的数据预处理功能。
安装
首先，在您的项目中安装 ic-formable，可以通过以下命令进行安装：
npm install ic-formable
另外，为了展示组件的效果，这里我们还需要安装 Vue：
npm install vue安装完成后，我们开始使用 ic-formable。
使用方法
基本使用
在 Vue 的组件中，我们可以直接引用 ic-formable，然后在 template 里使用 ic-formable 来生成表单。
-- -------------------- ---- ------- ---------- --------- ------------- ----------- ---------------------------------- ------------- ---------- ---------------------------------- ------------- ------------ ----------------------------------------- -------------- ---------- -------------- ------------------------------ --------------- ---------- ----------- -------- ------ - ---------- - ---- -------------- ------ ------- - ----- ---------- ----------- - -- -- ----------- ------- ------------- ----------- ----------------- -- ------ - ------ - --------- --- --------- --- ---------------- --- -- -- -------- - -------- - -------------------------------- -- - -- ------- - -- ------ - ---- - ----------------- -------- ---------- - --- -- -- -- ---------展开代码
上面代码中，我们通过 createFormItem() 和 createForm() 来分别创建表单项和表单组件，然后在 <template> 中使用。
这里的代码比较简单，就是一个基本表单的例子。表单中包含了三个表单输入框以及一个提交按钮。其中，表单输入框使用了 v-model 进行数据双向绑定。当用户点击提交按钮时，我们需要调用验证表单是否合法的方法 validate()，如果验证通过，则可以提交表单。
表单项的类型
ic-formable中的表单类型主要包括：普通表单、内联表单、水平表单 和 多列表单。这里我们将逐一介绍。
普通表单
普通表单是最基本的表单类型，它的每个表单项都是单独占据一行的。下面是普通表单的示例代码：
<ic-form> <ic-form-item label="用户名" v-model="username"></ic-form-item> <ic-form-item label="密码" v-model="password"></ic-form-item> <ic-form-item label="确认密码" v-model="confirmPassword"></ic-form-item> <ic-form-item> <ic-button type="primary" @click="submit">提交</ic-button> </ic-form-item> </ic-form>
内联表单
内联表单是使用 inline 属性来设置的，它的每个表单项都是横向排列的。下面是内联表单的示例代码：
<ic-form inline> <ic-form-item label="用户名" v-model="username"></ic-form-item> <ic-form-item label="密码" v-model="password"></ic-form-item> <ic-form-item label="确认密码" v-model="confirmPassword"></ic-form-item> <ic-form-item> <ic-button type="primary" @click="submit">提交</ic-button> </ic-form-item> </ic-form>
水平表单
水平表单是使用 horizontal 属性来设置的，它的每个表单项都是垂直排列的，标签和输入框是横向排列的。下面是水平表单的示例代码：
<ic-form horizontal> <ic-form-item label="用户名" v-model="username"></ic-form-item> <ic-form-item label="密码" v-model="password"></ic-form-item> <ic-form-item label="确认密码" v-model="confirmPassword"></ic-form-item> <ic-form-item> <ic-button type="primary" @click="submit">提交</ic-button> </ic-form-item> </ic-form>
多列表单
多列表单是使用 columns 属性来设置的，它可以将表单项分列进行展示。设置属性时，可以指定每列的表单项数量，如 columns="2" 指定了每列包含两个表单项，代码如下：
<ic-form columns="2"> <ic-form-item label="用户名" v-model="username"></ic-form-item> <ic-form-item label="密码" v-model="password"></ic-form-item> <ic-form-item label="确认密码" v-model="confirmPassword"></ic-form-item> <ic-form-item> <ic-button type="primary" @click="submit">提交</ic-button> </ic-form-item> </ic-form>
表单项的属性
每个表单项都可以通过设置属性来进行个性化的需求定制，下面是表单项可用的属性：
| 属性 | 类型 | 说明 |
|---|---|---|
| label | String | 标签名称 |
| labelWidth | String | 标签宽度 |
| prop | String | 表单项值的唯一标识 |
| rules | Array | 表单项验证规则 |
| error | String | 表单项验证错误信息 |
| validateStatus | String | 表单项验证状态，可选值为：success、warning、danger、info |
| helpText | String | 表单项帮助提示信息 |
| required | Boolean | 是否必填 |
| disabled | Boolean | 是否禁用 |
| readonly | Boolean | 是否只读 |
表单事件和方法
ic-formable 提供了丰富的表单事件和方法，主要包括以下几个：
Event: validate
表单验证事件，该事件会在表单验证结束后触发，其中参数 valid 表示表单是否验证通过。
-- -------------------- ---- ------- -------- ---------- ----------------------- ---- ---- ----- --- ---------- -------- - ----------------- - -- ------- - -- ------ - ---- - ----------------- -------- ---------- - - -展开代码
Method: validate(callback)
验证表单是否通过，如果通过，则会回调函数 callback(true)，否则会回调 callback(false)。
-- -------------------- ---- ------- ---------- -------------------------------------- -------- - -------------- - -------------------------------- -- - -- ------- - ----------------- -------- ----------- - ---- - ----------------- -------- ---------- - --- - -展开代码
Method: resetFields()
重置表单的所有值和验证状态。
<ic-button @click="resetForm">重置表单</ic-button> methods: { resetForm() { this.$refs.form.resetFields(); } }
Method: clearValidate(prop)
清除指定 prop 的表单项的验证状态。
<ic-button @click="clearValidate">清除验证</ic-button> methods: { clearValidate() { this.$refs.form.clearValidate("username"); } }
表单项验证规则
在 ic-formable 中，表单项的数据校验通过 Vue 的 自定义指令 validators 实现。每个表单项可以添加多个校验规则，可以自由组合选择。以下是 validators 可用的规则：
| 规则 | 说明 |
|---|---|
| required | 必填 |
| length | 长度限制 |
| 邮箱格式 | |
| phone | 手机号码格式 |
| number | 数字格式 |
| regExp | 正则表达式匹配 |
下面是一个长度限制的例子：
<ic-form-item label="标题" prop="title" :rules="[{ validator: 'length', min: 3, max: 5, message: '标题长度不正确，必须在 3 ~ 5 之间' }]"> <ic-input v-model="title"></ic-input> </ic-form-item>
这个例子使用了 length 规则，限制了标题的长度必须在 3 ~ 5 之间。
表单项验证错误提示
当表单项校验失败时，ic-formable 会添加一个错误提示框来展示错误信息。下面是指定错误提示框位置的属性：
| 属性 | 说明 |
|---|---|
| errorMessage | 输入框的错误提示信息 |
| errorPlacement | 错误提示框的放置位置，可选项为：bottom 和 right |
下面是一个自定义错误提示框位置的例子：
<ic-form-item label="身份证号码" prop="idCard"> <ic-input v-model="idCard"></ic-input> <ic-form-item-help style="position: absolute; top: 100%; left: 0; margin-top: 4px;" :error-message="errors.idCard" error-placement="right" ></ic-form-item-help> </ic-form-item>
这个例子使用了 ic-form-item-help 组件来实现错误提示框，并且通过 error-placement 属性指定了错误提示框放置的位置为右侧。
总结
本文介绍了 ic-formable 的使用方法和相关注意事项，其中包括表单类型、表单项属性、表单事件和方法、表单项验证规则和错误提示等。通过本文的学习，相信大家可以使用 ic-formable 轻松地创建各种表单，并且有能力进行个性化的需求定制编辑。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005633881e8991b448e0f5d
