If you are using Element UI 2.x version in Vue 2, and you are rendering multiple nested el-form-items through v-for loop and want to customize the validation function, you can achieve it by using dynamic validation rules. Below is an example code that demonstrates how to customize validation for dynamically rendered nested el-form-items:
Code#
<template>
<el-form :model="form" :rules="rules" ref="myForm">
<el-form-item v-for="(item, index) in formItems" :label="item.label" :key="index">
<el-input v-model="item.value" @blur="validateItem(index)"></el-input>
</el-form-item>
<el-button type="primary" @click="submitForm">Submit</el-button>
</el-form>
</template>
<script>
export default {
data() {
return {
formItems: [
{ label: 'Item 1', value: '' },
{ label: 'Item 2', value: '' },
// ...
],
form: {},
rules: {}
};
},
methods: {
validateItem(index) {
this.$refs.myForm.validateField(`formItems.${index}.value`, error => {
// Handle validation result
});
},
submitForm() {
this.$refs.myForm.validate(valid => {
if (valid) {
// Form validation passed, perform submit operation
// ...
} else {
// Form validation failed, show error message
// ...
}
});
}
},
mounted() {
this.rules = this.formItems.reduce((rules, item, index) => {
rules[`formItems.${index}.value`] = [
{ required: true, message: `Please fill in ${item.label}`, trigger: 'blur' },
// Custom validation rules...
];
return rules;
}, {});
}
};
</script>
In this example, we use v-for loop to render multiple nested el-form-items and bind a dynamic v-model to each el-form-item. We use the validateItem method to trigger validation for a specific el-form-item, which takes index as a parameter.
In the mounted lifecycle hook, we use the reduce method to dynamically generate a validation rules object rules based on the formItems array. In this example, we only demonstrate using the required validation rule to check if each item is empty. You can add other custom validation rules according to your needs.
In the validateItem method, we use this.$refs.myForm.validateField method to validate a specific field of the el-form-item. We specify the field to be validated by using a dynamic field path formItems.${index}.value and pass a callback function to handle the validation result.
Finally, we use this.$refs.myForm.validate method to trigger the validation of the entire form and handle the validation result in the callback function.
Please note that this example assumes that each object in the formItems array has label and value properties, you can adjust it according to your actual situation.
During the generation of validation rules, we use a dynamic field path formItems.${index}.value to match the value of each item and bind it to the corresponding validation rule.
In the validateItem method, we use this.$refs.myForm.validateField to validate a specific field. By passing a dynamic field path and a callback function, we can validate a specific el-form-item and handle the validation result in the callback function.
Finally, when submitting the form, we use this.$refs.myForm.validate to trigger the validation of the entire form and handle the validation result in the callback function.