标签: vee-validate

我正在使用 VUE 和 VEE-VALIDATE 并想检查输入是否是有效的小数，以逗号作为分隔符。

我的正则表达式输入如下所示：

<input type="text" v-model="myDecimal" v-validate:myDecimal="{ regex: /^(\d+|\d+,\d+)$/ }" :class="{'error': errors.has('mydecimal') }" ref="mydecimal" name="mydecimal" />
<span v-show="errors.first('mydecimal')" :class="{'field-validation-error': errors.has('mydecimal') }">NOT CORRECT DECIMAL!</span>

这对“1”、“1,2”、“0,4”、“12,28761”非常有效。完美的！

“,0”、“foo”、“1e”的错误显示正确。完美的！

但是，如果我输入以下内容，则不会出现任何错误，但我希望有一个：“1,1,1”或“1,1foo”。

任何想法我做错了什么？谢谢！

版本

VueJs：2.3.3
Vee验证：2.0.0-rc.25

说明

我有一个自定义组件。这是带有字符计数器的输入，我尝试在此输入中放入vee-validate。我想在提交表单时显示错误。我遵循vee-validate文档中的每个步骤，但是没有用。我的表单提交时忽略了任何输入错误。

重现步骤：

使用vee-validate

代码创建一个自定义组件 ：

Parent.vue

   <vue-input maxlength="20" minlength="3" placeholder="works"
    validate="required|numeric" v-model="dataItem.teste" name="teste"></vue-input>

Component.js

Vue.component('vue-input', {
    props: ['maxlength', 'minlength', 'placeholder', 'validate', 'value', 'name'],
    template: `<div>
              <div class="input-group">
                <input type="text" :name="name" :value="value" 
                @input="$emit('input', $event.target.value); 
                counter = $event.target.value.length" 
                :maxlength="maxlength" :placeholder="placeholder" 
                v-validate="validate" 
                :class="{'is-danger': errors.has(name), 'form-control' : true}">

                Erros: {{errors}}
                <span class="input-group-addon">
                    {{ maxlength - counter }}
                </span>

                <span v-show="errors.has(name)" class="text-danger m-t-xs">
                    {{ errors.first(name) }}
                </span>
             </div>
             </div>`,
             data: () => ({
                 counter: 0
             })
});

我正在尝试使用vee-validate插件进行表单验证而不使用npm install --save，所以我将 dist 文件夹中的文件复制到我的项目中，但由于某种原因我无法正确使用该插件。

这就是我在 pug 文件中将插件称为脚本的方式register.pug：

block main-content
  .article#register
  form
    input(
      v-model="email"
      v-validate.initial="'required|email'"
      :class="{'input': true, 'is-danger': errors.has('email') }")
block page-specific-scripts
  script(data-minjs-group="register" src="/libs/vue/vee-validate.js")
  script(data-minjs-group="register" src="/scripts/onboarding/register.js")

这是register.js：

(function(doc, win) {
  'use strict';

  var register = new Vue({ 
    el: '#register',
    data: {
      email: ''
    }
  });
})(document, window);

当我重新加载页面时，我收到以下消息：“属性或方法“错误”未在实例上定义，但在渲染过程中被引用。” 这不应该是这种情况，因为我认为这errors是 vee-validate 插件的内置属性。

下面是我在 vuejs 中的 2 个输入字段的代码。当前的验证规则是它们都需要是数字。我在这里阅读了官方文档。

我需要添加另一个规则，它max-amount必须大于min-amount. 诀窍是最小数量是用户输入，而不是预先确定的。我应该如何实现这个自定义验证器？

        <div class="min-section">
          <label>Min</label>
          <input type="text" 
          class="uk-input"
          name="min-amount"
          v-validate="'numeric'"
          v-model="minAmount" />
        </div>
        <div class="max-section">
          <label>Max</label>
          <input type="text" 
          class="uk-input"
          name="max-amount" 
          v-validate="'numeric'"
          v-model="maxAmount"/>
        </div>

当未提供 v-model 但我们有 @input & value 时，我在 v-for & 内进行 vee-validate 和验证时遇到问题

这是我的 CodeSandbox 链接：

https://codesandbox.io/s/pective-williamson-8nkou

我想要生成的是验证添加到列表中的每个新行，当用户在 TextArea 中键入内容时，我想进行验证吗？

我在 Vue.js 中使用名为 Vee Validate 的表单验证时遇到问题。我是初学者，不完全理解导入语法。我使用安装了 vee-validatenpm i vee-validate --save并将其放置在我的 node_modules 中。现在我将其导入到我的 main.js 模块中并使用官方页面上给出的代码：

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

extend('required', {
  ...required,
  message: 'This field is required'
});

但是当我打开index.html时出现错误：

Uncaught SyntaxError: The requested module '/@modules/vue.js' does not provide an export named 'default'

以下是 vee-validate 包的链接：https://www.npmjs.com/package/vee-validate ?activeTab=readme

感谢你们对我的帮助。如果我的问题不清楚，请原谅我。

我在我的 VueApp 中使用 Vuetify 和 Vee-Validate。

我尝试使用<span>{{ errors[0] }}</span>并且它出现，但是当我尝试使用时:error-messages="errors[0]"它没有出现。

                  <ValidationProvider rules="required|email" name="Username" v-slot="{ errors }">
                    <v-text-field
                      label="Username"
                      v-model="form.username"
                      type="email"
                      outlined
                      hide-details
                      :error-messages="errors[0]"
                    ></v-text-field>
                      <span>{{ errors[0] }}</span>
                  </ValidationProvider>

在我的表单中，我想添加一个带有 vee 验证的文本区域字段。

不幸的是，我无法获得 yup 模式提到的字段。

import { Form, Field, ErrorMessage, useFieldError } from "vee-validate"
import { string } from "yup"
import * as yup from "yup"

const schema = yup.object({
  name: string().required("Mandatory field"),
  description: string().required("Mandatory field"),
})

这是我的表单字段（按最后评论编辑：我错过了“v-bind”但仍然不起作用）

<Field name="description" v-slot="{ description }">
    <textarea v-bind="description" id="description" cols="30" rows="10" />
</Field>

该字段已填充，但未提及验证。

我在这里遵循了一个例子，但它不起作用。