Forms Vue.js重用表单验证规则

我觉得我在用我的表单复制很多代码

每个表单组件都具有以下结构：

模板

            <v-col cols="12" sm="6" md="4">
                <v-text-field
                        name="name"
                        v-model="user.name"
                        :rules='nameRules'
                        :label="$t('fields.name')"
                        color="elegant"
                        :error="!!errors.name"
                        :error-messages="errors.name ? errors.name : null"
                ></v-text-field>
            </v-col>
            <v-col cols="12" sm="6" md="4">
                <v-text-field
                        name="surname1"
                        v-model="user.surname1"
                        :rules='surname1Rules'
                        :label="$t('fields.surname1')"
                        color="elegant"
                        :error="!!errors.surname1"
                        :error-messages="errors.surname1 ? errors.surname1 : null"
                ></v-text-field>
            </v-col>
            <v-col cols="12" sm="6" md="4">
                <v-text-field
                        name="surname2"
                        v-model="user.surname2"
                        :rules='surname2Rules'
                        :label="$t('fields.surname2')"
                        color="elegant"
                        :error="!!errors.surname2"
                        :error-messages="errors.surname2 ? errors.surname2 : null"
                ></v-text-field>
            </v-col>
            <v-col cols="12" sm="6" md="4">
                <v-text-field
                        name="email"
                        v-model="user.email"
                        :rules='emailRules'
                        :label="$t('fields.email')"
                        color="elegant"
                        :error="!!errors.email"
                        :error-messages="errors.email ? errors.email : null"
                ></v-text-field>
            </v-col>

我对模板没问题，我别无选择，只能写我需要的所有字段。 但在脚本上，规则正在其他组件上复制

例如，在电子邮件字段中，它将始终具有相同的规则：（必选，最大值：100，必须是电子邮件）

所以它可以作为一种单独定义所有规则并在特定组件上使用它们的方法？比如说进口

你可以用

mixin是为Vue组件分发可重用功能的一种灵活方式。mixin对象可以包含任何组件选项。当组件使用mixin时，mixin中的所有选项都将“混合”到组件自己的选项中

src/mixins/validationRules.js

export const validationRules = {
    data() {
        return {
            validationRules_name: [
                v => !!v || this.$i18n.translate('validation.required', {'attribute': ''}),
                v => (v && v.length <= 100) || this.$i18n.translate('validation.lt.string', {
                        'attribute': '',
                        'value': 100
                })
            ],
            //...
        }
    }
}

导出常量验证规则={
数据（）{
返回{
验证规则\u名称：[
v=>！！v | | this.$i18n.translate（'validation.required'，{'attribute'：''}），
v=>（v&&v.length您可以使用

mixin是为Vue组件分发可重用功能的一种灵活方式。mixin对象可以包含任何组件选项。当组件使用mixin时，mixin中的所有选项都将“混合”到组件自己的选项中

src/mixins/validationRules.js

export const validationRules = {
    data() {
        return {
            validationRules_name: [
                v => !!v || this.$i18n.translate('validation.required', {'attribute': ''}),
                v => (v && v.length <= 100) || this.$i18n.translate('validation.lt.string', {
                        'attribute': '',
                        'value': 100
                })
            ],
            //...
        }
    }
}

导出常量验证规则={
数据（）{
返回{
验证规则\u名称：[
v=>！！v | | this.$i18n.translate（'validation.required'，{'attribute'：''}），
v=>（v&&v.length
<template>
    <v-text-field
        :rules="validationRules_name"
    />
</template>

<script>
import { validationRules } from '@/mixins/validationRules'
export default {
    mixins: [validationRules],
    //...
}
</script>