标签: vee-validate

我正在使用 vee validate 进行表单验证。我正在使用 vue 转换来显示这样的验证错误：

 <input type="text" name="name" v-validate="'required'">
<transition name="slide-fade">
  <div v-show="errors.has('name')">{{ errors.first('name') }}</div>
</transition>

css：

    .slide-fade-enter-active {
  transition: all .3s ease;
}
.slide-fade-leave-active {
  transition: all .8s cubic-bezier(1.0, 0.5, 0.8, 1.0);
}
.slide-fade-enter, .slide-fade-leave-to
/* .slide-fade-leave-active below version 2.1.8 */ {
  transform: translateX(10px);
  opacity: 0;
}

现在，当出现错误时，过渡有效，但当错误消失时，过渡不起作用。为什么会这样？

我正在尝试验证vuetify. 我设法以某种方式进行验证。但是我很困惑这是否是在 vuetify stepper 上进行验证的好方法。

我使用的方法数与向导中的步骤数相同。我正在使用vee-validate范围进行验证。

  methods: {
    submitForm1(scope) {
      debugger;
      this.$validator.validateAll(scope).then(result => {
        if (result) {
          this.e1 = 2;
        }
      });
    },
    submitForm2(scope) {
      debugger;
      this.$validator.validateAll(scope).then(result => {
        if (result) {
          this.e1 = 3;
        }
      });
    }
  },

数据：

  data() {
    return {
      e1: 0,
      name: "",
      resultStep1: true
    };
  }

Vuetify 步进器： Form1

<v-stepper-content step="1">
    <form data-vv-scope="form1">
        <v-card color="lighten-1" class="mb-5" height="200px">
            <v-card-text>
                <v-text-field 
                v-model="name" label="Contract Type" 
                :counter="10" 
                :error-messages="errors.collect('name')" 
                v-validate="'required|max:10'" 
                data-vv-name="name" required data-vv-scope="form1">
            </v-text-field>
            </v-card-text> …

使用 Vue.js 和 Vee-Validate，如何更改默认错误消息？

Vee-Validate 示例演示

开箱即用，对于所需的消息，它将显示“< fieldname > 字段是必需的”。但我只想要所有需要显示“必需”的字段。我知道我可以覆盖单个字段，但我只想全局覆盖任何显示必需错误的字段以显示“必需”。

当用户单击“提交”（不与输入元素内联）时，我需要在表单顶部的一个警报中显示所有表单验证错误。

如果我使用 Vuetify 和 Vee-Validation，如何抑制内联验证错误消息。（我将使用 $errors 数组在警报中显示错误）。文档中没有任何关于此的内容。

我尝试不在错误消息中传递任何内容，但随后我在无效字段上丢失了红色轮廓。

我的字段是这样配置的

<v-text-field
     v-validate="'required|email'"
     v-model="email"
     :error-messages="errors.collect('email')"
     label="Email Address*"
     data-vv-name="email"
     required
     outline>
</v-text-field>

我正在尝试在密码验证提供程序上添加 vee-validate 规则并确认密码。v-validate 必须在我必须向文本框添加规则的地方工作。但就我而言，我必须使用验证提供程序。请帮忙！！！

版本

vee-validate: 2.1.7
vue: 2.9.6

代码

<ValidationObserver ref="adminInfo">
<v-layout row wrap>
<v-flex xs12 md6>
    <ValidationProvider name="password" rules="required|min:5|max:35" ref="password">
    <v-text-field
      solo
      v-model="administratorInfo.newPassword"
      label="Set New Password"
      required

      slot-scope="{
          errors,
          valid
        }"
      :error-messages="errors"
      :success="valid"
    ></v-text-field>
    </ValidationProvider>
  </v-flex>
  <v-flex xs12 md6>
    <ValidationProvider name="confirm password" rules="'required|confirmed:password'">
    <v-text-field
      solo
      v-model="administratorInfo.cNewPassword"
      label="Confirm Password"
      required
      slot-scope="{
          errors,
          valid
        }"
      :error-messages="errors"
      :success="valid"
    ></v-text-field>
    </ValidationProvider>
  </v-flex>
</v-layout>
</ValidationObserver>

获取错误：

无法读取未定义的属性“$watch”

我正在使用 Vee-validate ( https://baianat.github.io/vee-validate/ ) 来验证我的所有表单。现在我想做以下事情：

在我的表单中，“值”字段是一个动态组件，具体取决于type当前对象的。类型可以是integer,string等decimal。

因此，如果类型发生变化，输入也会发生变化。

我就是这样做的：

   <component
     :name="'attribute-value'"
     v-model="attribute.value"
     :is="attribute.type">
   </component>

和

import string from '@/components/fields/String'
import integer from '@/components/fields/Integer'
import decimal from '@/components/fields/Decimal'

export default {
  name: 'edit',
  metaInfo: {
    title: 'Edit'
  },
  components: {
    string, integer, decimal
  },
}

好吧 - 每个字段都应该有自己的验证。-字段integer应该只允许数字。所以我想这样做：

<template>
    <b-input
      :id="name"
      :name="name"
      type="number"
      v-validate="{ required: true, numeric: true }"
      :state="errors.has(name) ? 'invalid' : ''"
      :value="value"
      v-on:input="$emit('input',$event)"/>
</template>
<script>
export default { …

我现在正在尝试在 VueJS - Vuetify 项目上使用 Vee Validate 3.x。要么我误解了这一点，要么文档非常不准确......

这是我所拥有的

主文件

import Vue from 'vue'
import App from './App.vue'
import vuetify from './plugins/vuetify';
import VueRouter from './routes';
import {ValidationProvider} from 'vee-validate';
import i18n from './i18n';
import { extend } from 'vee-validate';
import { required } from 'vee-validate/dist/rules';


// Register it globally
Vue.component('ValidationProvider', ValidationProvider);
// Add the required rule
extend('required', {
  ...required,
  message: 'This field is required'
});

Vue.config.productionTip = false;
new Vue({
  vuetify,
  router: VueRouter,
  i18n,
  render: h => h(App)
}).$mount('#app') …

我使用 Nuxt js + veeValidate 3.x

我的插件看起来像这样：

import Vue from 'vue'
import {
  ValidationObserver,
  ValidationProvider,
  extend
} from 'vee-validate'
import { required, email, min, confirmed } from 'vee-validate/dist/rules'

extend('required', {
  ...required,
  message: 'This field is required'
})
extend('email', email)
extend('min', min)
extend('confirmed', confirmed)
Vue.component('ValidationProvider', ValidationProvider)
Vue.component('ValidationObserver', ValidationObserver) 

作为插件添加到nuxt.config.js plugins: [{ src: '~/plugins/vee-validate.js', ssr: false }, .. 模板中，如下所示：

<ValidationObserver ref="registrationForm"> 
   <ValidationProvider rules="required|email" name="Email Address" v-slot="{ errors }">
    <div>
     <input type="text" v-model.lazy="user.email"/>
     <span class=form-errors">{{ errors[0] }}</span>
    </div>
   </ValidationProvider>
</ValidationObserver>

验证以这种方式完美运行：

methods: …

通过单击事件，我更改了 vue-i18n 语言，我想将 vee-validate 字典更改为相同的语言

主文件

import VeeValidate from 'vee-validate'
import validations from './validations.js'
import i18n from './lang'
Vue.use(VeeValidate)
new Vue({
   router,
   store,
   i18n,
   render: h => h(App)
}).$mount('#app')

vue-i18n 文件夹 > lang/index.js

import Vue from 'vue'
import VueI18n from 'vue-i18n'
import en from './locals/en'
import es from './locals/es'

Vue.use(VueI18n)

export default new VueI18n({
  locale: 'en',
  messages: {
    en: {
      lang: en
    },
    es: {
      lang: es
    }
  }
})

vee-validate 文件夹 > src/validations.js

import {Validator} from 'vee-validate'
const dictionary …

我想验证是否已使用 v-file-input 和 vee-validate 中的 ValidationProvider 选择文件。

下面是我的代码：

<v-flex>
  <ValidationProvider rules="required" v-slot="{ errors }">
    <v-file-input
      show-size
      accept=".xlsx"
      placeholder="Click here to select your file"
      label="File name"
      :error="errors.length > 0"
      :error-messages="errors[0]"
      @change="selectFile"
    >
    </v-file-input>
  </ValidationProvider>
</v-flex>

不知怎的，验证有效，但即使在我选择了一个文件之后它也工作得很好：

我不确定我做错了什么？