A
A
Alexey Alekseev2021-02-03 22:36:48
JavaScript
Alexey Alekseev, 2021-02-03 22:36:48

How to move Vuetify rules to a separate file?

Hello!
I have a vue component that describes a Vuetify form with rules.
Since there are many such components with forms, how can you put the rules in a separate file and use them later in the component?

The code is not all, the main thing for understanding.

<template>
<v-form>
                                                <v-row>
                                                    <v-col>
                                                        <v-text-field
                                                                v-model="phisicalFace.surname"
                                                                label="Фамилия*"
                                                                :rules="requiredRules"
                                                                required
                                                        ></v-text-field>
                                                    </v-col>
                                                    <v-col
                                                            cols="12"
                                                            sm="6"
                                                            md="4"
                                                    >
                                                        <v-text-field
                                                                v-model="phisicalFace.name"
                                                                label="Имя*"
                                                                :rules="requiredRules"
                                                                required
                                                        ></v-text-field>
                                                    </v-col>
                                                    <v-col
                                                            cols="12"
                                                            sm="6"
                                                            md="4"
                                                    >
                                                        <v-text-field
                                                                v-model="phisicalFace.secondname"
                                                                label="Отчество"
                                                        ></v-text-field>
                                                    </v-col>
                                               </v-row>
</v-form>
</template>

<script>
    export default {
        name: "Form",
        data () {
            return {
                -//
                requiredRules: [
                    v => !!v || 'Пожалуйста, заполните это поле',
                ],
                phoneRules: [
                    v => (!v || v.length === 18) || 'Пожалуйста, введите телефон',
                ],
                emailRules: [
                    v => (!v || /[email protected]+\..+/.test(v)) || 'Пожалуйста, введите адрес электронной почты',
                ],
                dateRules: [
                    v => (!v || /^(((0[1-9]|[12]\d|3[01])\.(0[13578]|1[02])\.((19|[2-9]\d)\d{2}))|((0[1-9]|[12]\d|30)\.(0[13456789]|1[012])\.((19|[2-9]\d)\d{2}))|((0[1-9]|1\d|2[0-8])\.02\.((19|[2-9]\d)\d{2}))|(29\.02\.((1[6-9]|[2-9]\d)(0[48]|[2468][048]|[13579][26])|((16|[2468][048]|[3579][26])00))))$/.test(v)) || 'Пожалуйста, введите дату',
                ],
-//
            }
        },

Answer the question

In order to leave comments, you need to log in

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question