Правила проверки формы повторного использования Vue.js

Question 1

Я чувствую, что дублирую много кода в своих формах.

Каждый компонент формы имеет следующую структуру:

template

            <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>

script

    data() {
        return {
            nameRules: [
                v => !!v || this.$i18n.translate('validation.required', {'attribute': ''}),
                v => (v && v.length <= 100) || this.$i18n.translate('validation.lt.string', {
                    'attribute': '',
                    'value': 100
                }),
            ],
            surname1Rules: [
                v => !!v || this.$i18n.translate('validation.required', {'attribute': ''}),
                v => (v && v.length <= 100) || this.$i18n.translate('validation.lt.string', {
                    'attribute': '',
                    'value': 100
                }),
            ],
            surname2Rules: [
                v => (!v || v.length <= 100) || this.$i18n.translate('validation.lt.string', {
                    'attribute': '',
                    'value': 100
                }),
            ],
            emailRules: [
                v => !!v || this.$i18n.translate('validation.required', {'attribute': ''}),
                v => (v && v.length <= 100) || this.$i18n.translate('validation.lt.string', {
                    'attribute': '',
                    'value': 100
                }),
                v => /.+@.+\..+/.test(v) || this.$i18n.translate('validation.email', {'attribute': ''}),
            ],

С шаблоном у меня все в порядке, мне ничего не остается, как прописать все нужные мне поля. Но на скрипте правила дублируются на других компонентах.

Например, поле электронной почты всегда будет иметь одни и те же правила: (обязательно, макс: 100, должно быть электронное письмо).

Так может быть способ определить все правила отдельно и использовать их на определенных компонентах? Нравится импорт?

forms validation vue.js rules reusability

1

slayerbleast 12 Ноя 2019 в 11:21

Answer

Вы можете использовать миксины.

Миксины - это гибкий способ распространять повторно используемые функции для компонентов Vue. Объект миксина может содержать любые параметры компонента. Когда компонент использует миксин, все параметры миксина будут «смешаны» с собственными опциями компонента.

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
                })
            ],
            //...
        }
    }
}

Добавьте миксин в компоненты формы:

<template>
    <v-text-field
        :rules="validationRules_name"
    />
</template>

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

2

tony19 16 Июл 2022 в 06:24

Question 2

Вы можете использовать миксины.

Миксины - это гибкий способ распространять повторно используемые функции для компонентов Vue. Объект миксина может содержать любые параметры компонента. Когда компонент использует миксин, все параметры миксина будут «смешаны» с собственными опциями компонента.

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
                })
            ],
            //...
        }
    }
}

Добавьте миксин в компоненты формы:

<template>
    <v-text-field
        :rules="validationRules_name"
    />
</template>

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

2

tony19 16 Июл 2022 в 06:24

Правила проверки формы повторного использования Vue.js

1 ответ

Похожие вопросы

Новые вопросы

forms