1 2 3 <div v-for="(input, index) in inputs" :key="index"> 4 5 6 7 8 9 10 11 Add input12 Submit13 14 15 16 17 export default {18 data() {19 return {20 form: {},21 inputs: [{name: '',age: ''}],22 rules: {23 name0: { required: true, pattern: /^[A-Za-z]+$/, message: 'Name can only contain letters', trigger: 'blur' },24 age0: { required: true, pattern: /^\d+$/, message: 'Age can only contain numbers', trigger: 'blur' },25 }26 }27 },28 methods: {29 addInput() {30 const index = this.inputs.length31 this.inputs.push({ name: '', age: '' })32 this.$set(this.form, `name${index}`, '')33 this.$set(this.form, `age${index}`, '')34 this.$set(this.rules, `name${index}`, { required: true, pattern: /^[A-Za-z]+$/, message: 'Name can only contain letters', trigger: 'blur' })35 this.$set(this.rules, `age${index}`, { required: true, pattern: /^\d+$/, message: 'Age can only contain numbers', trigger: 'blur' })36 },37 validateName(index) {38 this.$refs.form.validateField(`name${index}`)39 },40 validateAge(index) {41 this.$refs.form.validateField(`age${index}`)42 },43 submitForm() {44 this.$refs.form.validate(valid => {45 if (valid) {46 // submit form47 } else {48 console.log('validation failed')49 }50 })51 }52 }53 }54 55
可以使用 Element UI 的表单组件结合 Vue 的动态组件来实现动态添加多组输入框，并对每个输入框进行校验。Element UI 提供了很多内置的校验规则和提示信息，可以方便地应用到表单中。
首先，我们需要在 Vue 实例中声明一个 inputs 数组来存储每个输入组的数据。在添加输入组时，我们只需要向 inputs 数组中添加一个新的对象即可。
在模板中，我们使用 Element UI 的表单组件来渲染输入框，并使用 v-for 指令循环渲染多组输入框。在每个输入框中，我们使用 v-model 指令将输入值绑定到 inputs 数组中的数据属性上。对于 name 和 age 输入框，我们使用 pattern 规则来进行校验，并在 rules 对象中提供了相应的错误提示信息。在 checkNameInput 和 checkAgeInput 方法中，我们调用 $refs.form.validateField 方法来手动触发校验，并将当前输入对象作为参数传递进去。
最后，我们需要在 Vue 实例中声明一个 form 对象来维护表单数据，并将 rules 对象传递给 el-form 组件的 rules 属性。这样，每次输入框的值发生变化时，就会自动触发 Element UI 的校验机制，并显示相应的错误提示信息。
只是查找方便的总结