Vue3 Form Rules: Validating Category Data with Reactive Form Rules

Validating Category Data with Reactive Form Rules in Vue3

This example demonstrates how to utilize reactive Form Rules in Vue3 to validate category data, ensuring that required fields like category name, description, and icon upload are correctly handled.

Form Rules Definition:

const rules = reactive<FormRules>({  
    categoryDesp: [
        { max: 30, message: '限制30位字符串', trigger: 'blur' },
    ],
    categoryName: [
        { required: true, message: '请输入类目名称', trigger: 'blur' },
        { validator: leimu, trigger: 'blur' },
    ],
    categoryIcon: [
        { required: true, message: '请上传类目图标', trigger: 'change' },
    ],
});

Table Column for Icon Display:

<el-table-column label="类目图标" width="150">
    <template #default="scope">
        <div class="flex justify-center items-center">
            <el-image :src="scope.row.categoryIcon" class="w-10 h-10" :preview-teleported="true"
                :preview-src-list="[scope.row.categoryIcon]" />
        </div>
    </template>
</el-table-column>

Explanation:

• categoryIcon Rule: The required: true rule ensures that an icon upload is mandatory. The trigger: 'change' triggers validation whenever the icon input changes.
• Table Column: The el-table-column component displays the uploaded icon using the el-image component.

Key Considerations:

• leimu Validator: The leimu validator, not shown here, would typically be a custom function to enforce specific rules on the category name.
• Icon Upload: The icon upload mechanism is not explicitly defined in this example. It would likely involve an input element, file upload component, or a third-party library like element-ui or vuetify.

By incorporating these reactive Form Rules, you can build a robust validation system for your category data, ensuring that all required fields are filled and adhere to your specified rules.