Question

当我们尝试在Internet上填写表格时，必填字段会用红色的*标记，表示该字段是必填字段。

是否有办法在vuetify.js中指示用户使用必填字段？

希望我的问题很清楚。谢谢您！

Answer 1

所需的道具不再为标签明确添加星号。 v1.0删除了其所有验证功能。

因此，显然没有任何东西可以根据需要设置它了，我们必须在标签中手动添加它：

label="Name*"

或者您可以使用CSS：

.required label::after {
    content: "*";
}

您必须手动添加required类（该类的名称当然是任意的）。

Answer 2

这有点麻烦，但是有一个名为“ slot”的插槽，您可以执行以下操作：

<v-text-field
    v-model="loginInfo.email"
    autofocus
    name="email"
    type="email">
  <template #label>
    <span class="red--text"><strong>* </strong></span>Email
  </template>
</v-text-field>

Answer 3

您可以将规则道具传递给v-text-field。

例如，

<v-text-field
  v-model="title"
  :rules="['Required']"
  label="Title"
  counter
  maxlength="20"
></v-text-field>

有关完整图片，请参见以下Vuetify示例：https://github.com/vuetifyjs/vuetifyjs.com/blob/master/src/examples/text-fields/validation.vue

required也是HTML属性。您可以像这样将其添加到HTML元素中：

<v-text-field
  v-model="title"
  label="Title"
  counter
  maxlength="20"
  required
></v-text-field>

Answer 4

我有解决方案，可以将此css类添加到主css文件或main.js中。

div[aria-required=true].v-input .v-label::after {
  content: " *";
  color: red;
}

就是这样，在此添加字段中必填：

<v-text-field required>

Answer 5

从性能角度来看，我不知道这是否是最佳解决方案。但这有效。

将下面的JavaScript文件导入到应用程序引导程序中（或类似的东西）。

import Vue from 'vue';

Vue.mixin({
    mounted() {
        const e = this.$el;

        if ('querySelector' in this.$el) {
            const i = this.$el.querySelector('input[required]');

            if (i !== null) {
                const l = i.previousSibling;

                if (l.querySelector('.required.sign') === null) {
                    const r = document.createElement('span');

                    // l.classList.add('required');
                    r.classList.add('required', 'sign');

                    r.appendChild(document.createTextNode('*'));
                    l.appendChild(r);
                }
            }
        }
    },
});

Nuxt.js：：将上面的文件放入plugins文件夹中。将其路径包括在plugins文件的nuxt.config.js数组上。

将规则添加到全局CSS /主题中。

.v-label  > .required.sign {
    color: darkred;
    font-weight: bold;
    margin-left: .25em;
}

验证如何根据需要标记字段

5 个答案: