前端之家

  1. 首页
  2. 问答

Vue.js重用表单验证规则

• 问答

我觉得我要在表单中复制很多代码。

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

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',surname2Rules: [
                v => (!v || v.length <= 100) || this.$i18n.translate('validation.lt.string',emailRules: [
                v => !!v || this.$i18n.translate('validation.required',v => /.+@.+\..+/.test(v) || this.$i18n.translate('validation.email',

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

例如，电子邮件字段将始终具有相同的规则：（必填，最大：100，必须为电子邮件）。

那么这可能是一种单独定义所有规则并在特定组件上使用它们的方法吗？喜欢导入吗？

lqlzzm156 回答：Vue.js重用表单验证规则

您可以使用Mixins。

Mixins是分发Vue组件可重用功能的灵活方法。 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
                })
            ],//...
        }
    }
}

将mixin添加到表单组件中：

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

<script>
import { validationRules } from '@/mixins/validationRules'
export default {
    mixins: [validationRules],//...
}
</script>
formsreusabilityrulesvalidationvue.js
本文链接：https://www.f2er.com/3119028.html

大家都在问