Vue.js重用表单验证规则

Question

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

每个表单组件都有这样的结构：

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，必须是电子邮件(。

因此，这可以是一种单独定义所有规则并在特定组件上使用它们的方法吗？喜欢进口吗？

Answer 1

您可以使用Mixins。

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

将mixin添加到表单组件中：

<template>
<v-text-field
:rules="validationRules_name"
/>
</template>
<script>
import { validationRules } from '@/mixins/validationRules'
export default {
mixins: [validationRules],
//...
}
</script>