vue动态添加表单validateField验证

 1   <template>
    <el-form ref="form" :model="form" :rules="rules" label-width="100px">
      <div v-for="(input, index) in inputs" :key="index">
        <el-form-item :label="'Name ' + (index + 1)" :prop="'name' + index">
          <el-input v-model="input.name" @blur="validateName(index)"></el-input>
        </el-form-item>
        <el-form-item :label="'Age ' + (index + 1)" :prop="'age' + index">
          <el-input v-model.number="input.age" @blur="validateAge(index)"></el-input>
        </el-form-item>
      </div>
      <el-button type="primary" @click="addInput">Add input</el-button>
      <el-button type="primary" @click="submitForm">Submit</el-button>
    </el-form>
  </template>
  
  <script>
  export default {
    data() {
      return {
        form: {},
        inputs: [{name: '',age: ''}],
        rules: {
            name0: { required: true, pattern: /^[A-Za-z]+$/, message: 'Name can only contain letters', trigger: 'blur' },
            age0: { required: true, pattern: /^\d+$/, message: 'Age can only contain numbers', trigger: 'blur' },
        }
      }
    },
    methods: {
      addInput() {
        const index = this.inputs.length
        this.inputs.push({ name: '', age: '' })
        this.$set(this.form, `name${index}`, '')
        this.$set(this.form, `age${index}`, '')
        this.$set(this.rules, `name${index}`, { required: true, pattern: /^[A-Za-z]+$/, message: 'Name can only contain letters', trigger: 'blur' })
        this.$set(this.rules, `age${index}`, { required: true, pattern: /^\d+$/, message: 'Age can only contain numbers', trigger: 'blur' })
      },
      validateName(index) {
        this.$refs.form.validateField(`name${index}`)
      },
      validateAge(index) {
        this.$refs.form.validateField(`age${index}`)
      },
      submitForm() {
        this.$refs.form.validate(valid => {
          if (valid) {
            // submit form
          } else {
            console.log('validation failed')
          }
        })
      }
    }
  }
  </script>
  

 

可以使用 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 的校验机制，并显示相应的错误提示信息。