时间戳

首页 > 解决方案 > Vuelidate没有显示正确的错误

javascript - Vuelidate没有显示正确的错误

问题描述

我是 vuelidate 的新手，在按照他们文档中的一些教程示例进行操作时，我注意到我的代码中的错误甚至在输入任何内容之前就显示出来了，并且显示了错误的错误，例如在“必需”之前显示“minlenght”相关的错误消息字段”错误消息。

这是我关注的 vuelidate 文档的链接，这是我关注的官方 vue 材料表单示例的链接。

当我使用官方 vuelidate 示例时，错误消息显示在蝙蝠右侧，而不是仅在我键入内容后才显示：

在此处输入图像描述

这是我试图实现验证的单字段表单：

<template>
    <div class="action">
        <div class="md-layout md-gutter md-alignment-bottom-center ">
            <form novalidate class="md-layout" @submit.prevent="validateUser">
                <md-card class="cardStyle" >
                    <md-card-header>
                        <div class="md-title">FORM TEST</div>
                    </md-card-header>

                    <md-card-content>
                        FORM TYPE

                        <md-card class="md-medium-size-25 md-small-size-60 md-xsmall-size-100">
                            <md-card-expand>
                                <md-card-actions md-alignment="space-between">
                                    <div>
                                        INFO
                                    </div>

                                    <md-card-expand-trigger>
                                        <md-button class="md-icon-button">
                                            <md-icon>keyboard_arrow_down</md-icon>
                                        </md-button>
                                    </md-card-expand-trigger>
                                </md-card-actions>

                                <md-card-expand-content>
                                    <md-card-content>
                                        <md-field>
                                            <div>
                                                <label for="eventType">Event name</label>
                                                <md-input name="eventName" id="eventName" v-model="form.eventName"/>
                                            </div>
                                        </md-field>
                                            <span class="md-error" v-if="!$v.form.eventName.required">REQUIRED</span>
                                            <span class="md-error" v-else-if="!$v.form.eventName.minlength">INVALID</span>

                                    </md-card-content>
                                </md-card-expand-content>
                            </md-card-expand>
                        </md-card>
                    </md-card-content>
                </md-card>
            </form>
        </div>
    </div>
</template>

<style  scoped>
    /*.cardStyle {
        min-width: 50%;
        margin: 4px;
        display: inline-block;
        vertical-align: top;
    }*/
    .action {
        display: flex;
        align-items: center;
        justify-content: center;
        position:sticky;
        padding-top: 5%;
        padding-bottom: 5%;
    }
</style>

<script>
    import { validationMixin } from 'vuelidate'
    import {
        required,
        email,
        minLength,
        maxLength
    } from 'vuelidate/lib/validators'

    export default {
        name: 'Budget',
        mixins: [validationMixin],
        data: () => ({
            form: {
                formType: null,
                eventName: null,
                BU: null,
                startDate: null,
                startHour: null,
                endDate: null,
                endHour: null,
                participants: null,
                coverage: null,
                local: null,

              },
        }),
        validations: {
          form: {
            eventName: {
              required,
              minLength: minLength(3)
            },
            lastName: {
              required,
              minLength: minLength(3)
            },
            age: {
              required,
              maxLength: maxLength(3)
            },
            gender: {
              required
            },
            email: {
              required,
              email
            }
          }
        },

    }
</script>

标签： javascriptvue.jsvue-materialvuelidate

解决方案

正如您所说，验证错误立即可见。一种解决方法是将惰性属性应用于您的 v-model 并使用 $v 对象作为您的模型，如下所示

<md-input name="eventName" id="eventName" v-model.lazy="$v.form.event.Name.$model"/>

您应该做的另一件事是手动检查错误并在错误退出时显示消息

data() {
  return {
    hasError: false,
  };
},
methods: {
 submit() {
   if (this.$v.form.$pending || this.$v.form.$error) {
      this.hasError = true;
   }
 }
},
.....

显示错误时，您现在可以执行多项检查

<span class="md-error" v-if="hasErrors && !$v.form.eventName.required">REQUIRED</span>

推荐阅读