动量满满，立显风采 —— 基于iView UI的动态添加表单项与校验规则书写

2023-10-26 20:15:19

纵览全局，洞悉全景

在进行动态表单验证之前，我们必须首先了解 iView UI 表单验证机制。iView UI 提供了一系列表单验证规则，涵盖了常用的验证场景，如：

必须输入
最大长度
最小长度
手机号码
邮箱地址
等

这些规则可以帮助我们快速构建表单验证逻辑，确保表单数据有效。

挥洒自如，挥斥方遒

了解了 iView UI 的表单验证机制后，我们就可以开始在动态表单中添加表单项并进行校验规则的书写了。首先，我们需要定义一个表单对象，该表单对象包含了所有表单项的信息，包括表单项的名称、类型、校验规则等。

const form = {
  fields: [
    {
      name: 'name',
      type: 'text',
      rules: [
        { required: true, message: '请输入姓名' },
        { max: 20, message: '姓名长度不能超过 20 个字符' }
      ]
    },
    {
      name: 'email',
      type: 'email',
      rules: [
        { required: true, message: '请输入邮箱地址' },
        { type: 'email', message: '请输入有效的邮箱地址' }
      ]
    }
  ]
};

然后，我们就可以在组件中使用 iView UI 的 Form 组件来渲染表单，并使用 FormItem 组件来渲染每个表单项。在 FormItem 组件中，我们可以通过 rules 属性来指定校验规则。

<Form :model="form" :rules="form.fields">
  <FormItem label="姓名" prop="name">
    <Input v-model="form.name" placeholder="请输入姓名"></Input>
  </FormItem>
  <FormItem label="邮箱地址" prop="email">
    <Input v-model="form.email" placeholder="请输入邮箱地址"></Input>
  </FormItem>
  <Button type="primary" @click="submitForm">提交</Button>
</Form>

当用户提交表单时，iView UI 将自动对表单数据进行校验，并根据校验规则生成错误信息。如果表单数据不合法，iView UI 会提示用户修改错误的数据。

如虎添翼，如鱼得水

iView UI 还提供了动态添加表单项的功能，这使得我们在开发动态表单时更加得心应手。我们可以通过 Form.add 方法来动态添加表单项，并通过 Form.remove 方法来删除表单项。

const form = new Form({
  fields: [
    {
      name: 'name',
      type: 'text',
      rules: [
        { required: true, message: '请输入姓名' },
        { max: 20, message: '姓名长度不能超过 20 个字符' }
      ]
    }
  ]
});

form.add({
  name: 'email',
  type: 'email',
  rules: [
    { required: true, message: '请输入邮箱地址' },
    { type: 'email', message: '请输入有效的邮箱地址' }
  ]
});

锦上添花，完美收官

为了让表单验证更加友好，我们可以使用 iView UI 提供的提示信息功能。iView UI 提供了两种提示信息类型：

immediate：表单项失去焦点时立即显示提示信息
blur：表单项失去焦点并提交表单时显示提示信息

<FormItem label="姓名" prop="name">
  <Input v-model="form.name" placeholder="请输入姓名"></Input>
  <Form-Item-Tip type="success">姓名不能为空</Form-Item-Tip>
</FormItem>