标签: vee-validate

我正在尝试使用vee validate来验证使用此代码的密码.

<div>
    <input type="password"
           placeholder="Password"
           v-model="password"
           v-validate="'required|min:6|max:35|confirmed'"
           name="password" />
</div>
<div>
    <span>{{ errors.first('password') }}</span>
</div>
<div>
    <input type="password"
           placeholder="Confirm password"
           v-model="confirmPassword"
           v-validate="'required|target:password'"
           name="confirm_password" />
</div>
<div>
    <span>{{ errors.first('confirm_password') }}</span>
</div>

但它总是说密码确认不匹配. 我的代码出了什么问题？

任何帮助

提前致谢.

我正在测试一个表单组件,所有字段都经过验证,vee-validate 目前我在我的包装器中注入了一个验证器

import VeeValidate from "vee-validate";

Vue.use(VeeValidate, { errorBagName: "errors" });

describe("ContactForm.vue", () => {
 const v = new VeeValidate.Validator();

 beforeEach(() => {
  options = {
        sync: false,
        provide: () => ({
          $validator: v
        })
 };
 wrapper = shallowMount(ContactForm, options);
});

它$validator有一些功能: init(), localize(), validateAll() , reset(), ...我可以绕过一些测试

反正有没有validator用Jest函数来模拟这样的东西？

谢谢你的反馈

我在 Nuxt v2.13 和 Vuetify v2 上，也在我的默认布局中使用 keep-alive 。随着我的应用程序变得越来越大，我越来越注意到内存问题，因此我的应用程序在云服务器上至少需要大约 4GB 的 RAM 才能构建和正常运行。我四处挖掘，发现零散的碎片，所以决定分享它们并讨论解决方案。

请根据他们的#numbers回答每一个

#1 - NuxtLink (vue-router) 内存泄漏： 其他人发现 vue-router 可能存在泄漏；还因为与 nuxt-link 关联的 DOM 将被预取，因此内存使用率也可能很高。所以有人建议使用 html 锚而不是像这样的 nuxt-link：

<template>
  <a href="/mypage" @click.prevent="goTo('mypage')">my page link</a>
</template>

<script>
export default{
  methods:{
    goTo(link){
      this.$router.push(link)
    }
  }
}
</script>

你怎么看这种方法？那么 Vuetify toprops怎么样，因为它们像 nuxt-link 一样工作？

<template>
  <v-card to="/mypage" ></v-card>
</template>

#2 - 动态组件加载： 由于我的应用程序是双向的并且可以通过.env文件自定义，我不得不像这样动态地和有条件地延迟加载我的许多组件：

<template>
  <component :is="mycomp" />
</template>

<script>
export default{
  computed:{
    mycomp(){
      return import()=>(`@/components/${process.env.SITE_DIR}/mycomp.vue`)
    }
  }
}
</script>

这会导致高内存使用率/泄漏吗？？ …

我想禁用我的提交按钮,直到我的表单填写正确,这是我到目前为止:

<form>
   <input type="text" class="form-control" v-validate="'required|email'" name="email" placeholder="Email" v-model="userCreate.userPrincipalName" />
   <span v-show="errors.has('email')">{{ errors.first('email') }}</span>
   <button v-if="errors.any()" disabled="disabled" class="btn btn-primary" v-on:click="sendInvite();" data-dismiss="modal" type="submit">Send Invite</button>
   <button v-else="errors.any()" class="btn btn-primary" v-on:click="sendInvite();" data-dismiss="modal" type="submit">Send Invite</button>
</form>

在我开始输入值之后,上面只打印错误消息并禁用我的提交按钮.在开始与输入交互之前,我需要从一开始就禁用它,这样我就不能发送空字符串了.

另一个问题是,是否有比使用更好的方法v-if？

编辑:

 userCreate: {
        customerId: null,
        userPrincipalName: '',
        name: 'unknown',
        isAdmin: false,
        isGlobalAdmin: false,
        parkIds: []
    }

在我的应用程序中,我有很多表单,大多数输入看起来都是这样的:

<div class="form-group">
    <label for="language">{{ $t('form.language')}}</label>
    <input type="text" class="form-control" id="language" name="form.language" v-model="language" v-validate.initial="'required'" :data-vv-as="$t('form.language')" />
    <span class="invalid-feedback">{{ errors.first('language') }}</span>
</div>

这一遍又一遍地重复.唯一真正改变的是字段名称和输入类型.有时它是一个选择,有时它是一个更复杂的组件而不是简单的HTML组件.

我的想法是创建一些包装器组件.所以我不必复制所有这些,只需使用类似的东西:

<form-group name="language">
    <input type="text" v-model="form.language">
</form-group>

我尝试以这种方式实现它,但它不起作用:

<template>
    <div class="form-group">
        <label :for="name">{{ $t('form.' + name)}}</label>
        <slot class="form-control"
              :id="name"
              :data-vv-name="name"
              v-validate.initial="'required'"
              :data-vv-as="$t('form.'+ name)">
        </slot>
        <span class="invalid-feedback">{{ errors.first(name) }}</span>
    </div>
</template>

<script>
    export default {
        props: ['name']
    }
</script>

你有什么想法？问题是我无法轻松地将mixins和props传递给slotted元素/组件.

我正在尝试使用VeeValidate，示例显示了ES6导入的用法，如下所示：

import { Validator } from 'vee-validate';

我的理解是，这仅适用于npm，不适用于CDN。我只想编写客户端js，而不要使用节点js。我是否需要研究诸如browserify或webpack之类的东西？

我试图从CDN链接复制javascript，只是将其设为要导入的本地js文件，但无法正常工作。因为我没有出口声明，所以行不通吗？

浏览 vee-validates 文档，我没有看到任何用于验证选择输入的内容。所以我的问题是你能验证选择吗？目前我尝试的内容不会显示错误消息...

这是代码

<select id="category" v-model="client.category" name="Category Type" v-validate="'required'">
  <option disabled>{{option}}</option>
  <option v-for="category in categories" :key="category.id" :value="category">{{ category }}</option>
 </select>
 <spanv-show="errors.has('Category Type')">{{ errors.first('Category Type') }}</span>

我有几个组件需要验证。问题是输入位于子组件中，而提交按钮位于父组件中，如下所示

父组件.js

<ValidationObserver v-slot="{ passes }"> 
     <form @submit.prevent="passes(someSubmitFunction)">
         <ChildComponent />
     </form>
</ValidationObserver>

子组件.js

     <ValidationProvider rules="required" v-slot="{ errors }" name="vendorName">
         <el-input />
      </ValidationProvider>

我在这里做错了什么？

我有一个全局验证规则，例如：

import { extend } from 'vee-validate';
import { required } from 'vee-validate/dist/rules';

extend('required', {
  ...required,
  message: 'Please fill the field'
});

该规则适用于项目中的所有 Vue 组件。但对于一个确切的组件，我需要将消息重新定义Please fill the field为另一个组件。是否可以只更改一个 Vue 组件的消息？

应用程式（父母）

嗨，我有这些组件（子组件）TextComponent InfoErrorForm

当我按下从父组件提交的应用程序时，不会验证此表单。因此，我尝试在子组件（TextComponent）中注入$ validator进行验证，并提供但不显示message error。如果可以帮助我验证inisde父组件的子代，则可以。这是我的代码

AppComponent

<template>
      <div>
        <!-- Form validar numero max input -->
        <form :class="{'was-validated': error_in_form_save_progress}" >

           <card-shadow v-for="(texto,key) in sections_template.texts" :key="key" > 
            <texto-component 
              :orden="key+2"
              v-model="sections_template.texts[key].content" 
              :tituloComponente="texto.title" 
              :inputName="texto.title" >
              <template slot="section_show_error_validate_input">
                <info-error-form 
                  :listErrors='errors' 
                  :name_field = "texto.title" 
                  v-show = "error_in_form_save_progress" >
                </info-error-form>
              </template>
            </texto-component>
          </card-shadow>

        </form>

        <div class="row foot_button" >
          <div class="offset-md-3 col-md-3">
            <button class="btn" @click.prevent="save_progrees"> Guardar Cambios</button>
          </div>

        </div>
      </div>
    </template>

    <script>

      export default {

        provide() {
       return {
         $validator: this.$validator,
       };
    },
        data: function(){
          return { …