vue動態添加表單validateField驗證

 1   <template>
 2     <el-form ref="form" :model="form" :rules="rules" label-width="100px">
 3       <div v-for="(input, index) in inputs" :key="index">
 4         <el-form-item :label="'Name ' + (index + 1)" :prop="'name' + index">
 5           <el-input v-model="input.name" @blur="validateName(index)"></el-input>
 6         </el-form-item>
 7         <el-form-item :label="'Age ' + (index + 1)" :prop="'age' + index">
 8           <el-input v-model.number="input.age" @blur="validateAge(index)"></el-input>
 9         </el-form-item>
10       </div>
11       <el-button type="primary" @click="addInput">Add input</el-button>
12       <el-button type="primary" @click="submitForm">Submit</el-button>
13     </el-form>
14   </template>
15   
16   <script>
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.length
31         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 form
47           } else {
48             console.log('validation failed')
49           }
50         })
51       }
52     }
53   }
54   </script>
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 的校驗機制，並顯示相應的錯誤提示信息。