1 <template> 2 <el-form ref="form" :model="form" :rules="rules" label-> 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 的校驗機制，并顯示相應的錯誤提示資訊，
只是查找方便的總結轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/549353.html
標籤：其他