标签: vee-validate

对于我的 Vuejs 应用程序，我使用Vee-validate进行验证。目前，它将有效的 URL 标记http://localhost:3000为无效，例如。

这也发生在他们的样本上：http : //vee-validate.logaretm.com/rules.html#rule-url

如果您输入http://localhost:3000他们的示例，您将看到消息The field field is not a valid URL.

我有一个带有 veevalidate 的多个文本字段中继器。问题是，当第一个字段出现错误时，其他字段也会受到影响。并且，在添加新字段时将继承该错误。

-> https://prnt.sc/h75byu

这是我的html

<div id="app">
  <form class="ui form" @submit.prevent="onSubmit">

    <div class="repeater" v-for="(field, index) in fieldsRepeater">
      <div class="field" :class="{error: errors.has('fname')}">
        <label>First Name</label>
        <input type="text" name="fname" placeholder="First name" v-validate="'required'" v-model="fname">
        <span class="error" v-if="errors.has('fname')">{{errors.first('fname')}}</span>
      </div>

      <div class="field" :class="{error: errors.has('lname')}">
        <label>Last Name</label>
        <input type="text" name="lname" placeholder="Last name" v-validate="'required'" v-model="lname">
        <span class="error" v-if="errors.has('lname')">{{errors.first('lname')}}</span>
      </div>

    </div>
  <button type="button" class="ui button" @click="AddField">Add Field</button>

  <button type="submit" class="ui submit button">Submit</button>
  </form>
</div>

这是我的 vuejs

Vue.use(VeeValidate)

new Vue({
  el: '#app',
  data() {
    return {
      fieldsRepeater: [{
        fname: …

我试图限制用户可以在3-6之间输入的位数.

出于某种原因,我找不到如何做到这一点.

这是我必须强制用户添加三位数的代码

<input type="text"  name='account-field-3' v-validate="'required|digits:3'" placeholder="6" class="form-control" > 

但我需要的是3-6之间.

如何在vue.js中使用vee validate以这种形式设置验证

• 图像尺寸小于500 * 500像素

• 图片大小小于100kb

我想使用 vee-validate 检查表单是否有效。我目前正在这样做：

<button type="submit" :disabled="errors.count()">

但是当表单被创建但尚未验证时errors.count() return 0，意味着按钮保持启用状态，直到用户修改一个字段。有没有办法在开始时验证它？

“vee-validate”：“^2.2.11”，“vue”：“^2.5.16”，

我需要一个简单的规则，规则应该是输入必须是必填的，数字且大于0。

因此，在这种情况下，如果我输入 0，它会正确验证（返回 false），但如果我输入类似 0.0 vv 的内容，则会返回 true。即使我删除 is_not:0，结果仍然相同。

<sui-input 
  type="text"
  v-validate="'required|decimal|is_not:0'"
  name="cellSize"
  v-model="cellSize">

从文档中，我认为我需要使用配置将自定义类添加到我的验证字段中，但我无法让它工作。

这就是我到目前为止所拥有的......

import { extend, configure, localize } from 'vee-validate'
import { required, min, max } from 'vee-validate/dist/rules'
import en from 'vee-validate/dist/locale/en.json'

// Install rules
extend('required', required)
extend('min', min)
extend('max', max)

// Install classes
configure({
  classes: {
    valid: 'is-valid',
    invalid: 'is-invalid'
  }
})

// Install messages
localize({
  en
})

在我看来......

<ValidationObserver ref="observer" v-slot="{ invalid }" tag="form" @submit.prevent="checkRef()">
  <div class="form-group">
    <label for="reference">Reference</label>
    <ValidationProvider rules="required|max:20" name="reference" v-slot="{ errors }">
      <input maxlength="20" name="reference" v-model="ref" id="reference" class="form-control"/>
      <span class="warning">{{ errors[0] }}</span>
    </ValidationProvider>
  </div>
  <button …

如果在表单中单击提交按钮，如果存在错误，它应该自动滚动到第一个验证错误。我读过可以使用“scrolltoview”来实现此目的，但我不知道具体如何操作。

我已经尝试过使用简单的 ScrollTo (0.0) 来在出现错误时简单地向上滚动，并且效果完美。然而，这不是我想要的解决方案。

< script >
  ...
  let name = 'm-form-user';
export default {
  name: name,
  mixins: [baseForm],
  props: {
    name: {
      type: String,
      default: name
    },
    title: {
      type: String,
      default: ''
    },
    type: {
      type: String,
      default: 'create',
      validator: function(value) {
        return ['edit', 'create'].indexOf(value) !== -1
      }
    },
  },
  data: () => ({
    form: {
      firstName: '',
      lastName: '',
      position: '',
      email: '',
      mobile: '',
      roles: []
    }
  }),
  async created() {
    if (!this.isCreationForm && this.$route.params.id) …

在 vuejs3 下我使用命令安装 vee-validate

yarn add vee-validate@next

成功后我运行服务器并出现错误

$ yarn run serve            
yarn run v1.22.5
$ vue-cli-service serve
 INFO  Starting development server...
98% after emitting CopyPlugin
ERROR  Failed to compile with 1 errors                                                                                                                                                                   
    2:07:01 PM

This dependency was not found:

* vee-validate/dist/rules in ./node_modules/cache-loader/dist/cjs.js??ref--12-0!./node_modules/babel-loader/lib!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader-v16/dist??ref--0-1!./src/components/auth/Login.vue?vue&type=script&lang=js

To install it, you can run: npm install --save vee-validate/dist/rules
Error from chokidar (/mnt/_work_sdb8/wwwroot): Error: Circular symlink detected: "/mnt/_work_sdb8/wwwroot/wwwroot" points to "/mnt/_work_sdb8/wwwroot"

我将 vuejs 2 应用程序中的代码粘贴为：

<script>
  import { bus } from '../../../src/main'
  import appMixin from …

我很难理解将这个很棒的插件安装到 nuxt 的文档。据我了解，我很难相信，您必须导出插件文件中的所有规则。我尝试导出一些规则，但 nuxt 不知道 ValidationObserver 组件是什么。