### 实现动态添加表单项并应用正则表达式验证 在前端开发中，`a-form` 是 Ant Design Vue 的组件之一，用于构建复杂的表单结构。当需要动态增加表单项时，可以通过维护一个数组来存储表单项的数据，并通过 `v-for` 渲染这些项。同时，为了实现正则表达式的验证功能，可以利用 `rules` 属性配置校验规则。 以下是具体的实现方式： #### 数据模型设计 首先，创建一个响应式对象或数组来保存动态表单项的数据。每新增一项时，向该数组中追加一个新的条目[^1]。 ```javascript const formState = reactive({ items: [ { name: '', email: '' } // 初始默认值 ] }); ``` #### 动态渲染表单项 使用 `v-for` 配合 `key` 来遍历 `formState.items` 数组中的每一项，并将其绑定到对应的输入框上[^2]。 ```vue <a-form :model="formState"> <div v-for="(item, index) in formState.items" :key="index"> <!-- 姓名 --> <a-form-item label="姓名" :name="'items.' + index + '.name'" :rules="[{ required: true, message: '请输入姓名' }]"> <a-input v-model:value="item.name" /> </a-form-item> <!-- 邮箱 --> <a-form-item label="邮箱" :name="'items.' + index + '.email'" :rules="[ { type: 'email', message: '请输入有效的邮箱地址' }, { required: true, message: '请输入邮箱' } ]"> <a-input v-model:value="item.email" /> </a-form-item> </div> <!-- 添加按钮 --> <a-button @click="addFormItem">添加</a-button> </a-form> ``` #### 新增表单项逻辑 编写一个函数用来处理新表单项的添加操作。每次调用此函数时，都会往 `formState.items` 中推入一条新的记录[^2]。 ```javascript function addFormItem() { formState.items.push({ name: '', email: '' }); } ``` #### 自定义正则表达式验证 如果某些字段需要更复杂或者特殊的验证条件，则可以在 `rules` 中指定自定义的正则表达式。例如，对于手机号码的校验可如下设置： ```javascript { validator(_, value) { const regex = /^1[3-9]\d{9}$/; // 手机号码正则 if (!value || regex.test(value)) { return Promise.resolve(); } return Promise.reject('请输入合法的手机号'); }, trigger: ['blur'] } ``` 将以上代码片段嵌套至对应字段的 `rules` 定义里即可完成定制化需求。 --- ### 总结 通过上述方法能够轻松实现在 `a-form` 组件中动态添加表单项的同时支持基于正则表达式的严格数据校验。核心在于合理运用 Vue 双向绑定机制以及 Ant Design 提供的强大 API 支持[^2]。