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. Here is an example code that demonstrates how to customize the 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, display 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 the validation for a specific el-form-item, which takes the index as a parameter.
In the mounted lifecycle hook, we use the reduce method to dynamically generate the 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, but you can add other custom validation rules according to your needs.
In the validateItem method, we use the this.$refs.myForm.validateField method to validate a specific field of the el-form-item. We specify the field to be validated by using the dynamic field path formItems.${index}.value and pass a callback function to handle the validation result.
Finally, we use the this.$refs.myForm.validate method to trigger the validation for 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, and you can adjust it according to your actual situation.
During the generation of validation rules, we use the 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 the 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 for the entire form and handle the validation result in the callback function.