标签: vuelidate

如何使用Vuelidate minValue maxValue

我找不到如何检查大于 0,因为minValue(0)也接受 0,但如果使用,minValue(1)则 0 和 1 之间的任何小数也将不被接受。

另外我不知道为什么我不能使用 data/computed 中的变量作为下面的 maxValue 。如果我使用maxValue(200),它会起作用,但我需要它是动态的。

validations: {
    form: {
        amount: {
            maxValue: maxValue(this.maxAmount), // Uncaught TypeError: Cannot read property 'maxAmount' of undefined
        },
    },
},
validations: {
    form: {
        amount: {
            maxValue: maxValue(maxAmount), // Uncaught ReferenceError: maxAmount is not defined
        },
    },
},
Run Code Online (Sandbox Code Playgroud)

javascript vue.js vuelidate

2
推荐指数
1
解决办法
9912
查看次数

如何告诉 Vuelidate 的验证器接受“alphaNum”加字符点(“.”)?

我有一个输入字段,我可以告诉Vuelidate它只接受alphaNumRequired像这样:

import { required, alphaNum } from "vuelidate/lib/validators";

export default {
  data() {
    return {
      myInputValue: ""
    };
  },
  validations: {
    myInputValue: {
      required,
      alphaNum
    }
  }
};

Run Code Online (Sandbox Code Playgroud)

我的问题来了,我怎样才能myInputValue接受一个额外的字符点(.)?

哪个会完全接受这些东西

  1. abcdefghijklmnopqrstuvwxyz
  2. ABCDEFGHIJKLMNOPQRSTUVWXYZ
  3. 0123456789
  4. .

我怎样才能做到这一点?

javascript vue.js vuelidate

2
推荐指数
1
解决办法
1764
查看次数

Vue :state,这是什么?

我正在使用https://bootstrap-vue.org/docs/reference/validation#vuelidate,我遇到了

:state 作为 vue 属性。

我没有在文档中找到任何东西,我很困惑。它来自哪里,它有什么作用?实际上似乎我需要使用它来验证输入字段。但我宁愿使用@blur 而不是 state,但它不起作用。

vue.js vuelidate bootstrap-vue

2
推荐指数
1
解决办法
245
查看次数

Vuejs:vuelidate条件验证

假设我们有一个密码字段,并且我们想要对长度、特殊字符、数字、大写和小写等进行一些验证,前提是该字段有值

我们如何使用 vuelidate 做到这一点。

我在这里导入 vuelidate

import { required, minLength, maxLength, email, sameAs } from 'vuelidate/lib/validators'
Run Code Online (Sandbox Code Playgroud)

这里是验证

validations: {
    editedItem: {
      firstname: { required, minLength: minLength(3), maxLength: maxLength(20) },
      lastname: { required, minLength: minLength(3), maxLength: maxLength(20) },
      email: { required, email },
      password: {
        required,
        minLength: minLength(6),
        maxLength: maxLength(15),
        oneNumber,
        oneUpperCase,
        oneLowerCase,
      },
      repassword: {
        sameAsPassword: sameAs('password'),
      },
    },
  }
Run Code Online (Sandbox Code Playgroud)

,

oneNumber、oneUpperCase 和 oneLowerCase 是自定义验证:

const oneNumber = (value) => /[0-9]/.test(value)
const oneUpperCase = (value) => /[A-Z]/.test(value)
const oneLowerCase …
Run Code Online (Sandbox Code Playgroud)

vuejs2 vuetify.js vuelidate

2
推荐指数
1
解决办法
6633
查看次数

与 Vue 3 一起使用时出现 Vuelidate TypeError

我正在尝试将 Vuelidate 与 Vue 3 一起使用。当我尝试向组件添加一些验证器时,出现以下错误:

index.js?1dce:614 Uncaught (in promise) TypeError: Cannot read property 'super' of undefined
Run Code Online (Sandbox Code Playgroud)

我相信这与我在 Vue 实例中使用 Vuelidate 的方式有关。这是我的 main.js 文件:

import { createApp } from 'vue';
import App from './App.vue';
import Vuelidate from 'vuelidate';

const app = createApp(App);
app.use(Vuelidate);
app.mount('#app');
Run Code Online (Sandbox Code Playgroud)

我还将包含组件代码:

<template>
  <div id="signup">
    <div class="signup-form">
      <form>
        <div class="input">
          <label for="email">Mail</label>
          <input
                  type="email"
                  id="email"
                  @input="$v.email.$touch()"
                  v-model="email">
                  <div>{{ $v }}</div>
        </div>
      </form>
    </div>
  </div>
</template>

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

  export default {
    data …
Run Code Online (Sandbox Code Playgroud)

vuelidate vuejs3

2
推荐指数
1
解决办法
7801
查看次数

提交表单时,Vuelidate 为所有属性设置 dirty false

我有一个带有配置Vuelidate验证器的简单表单。input如果处于状态,它会显示错误消息dirty,因此form第一次打开时不会出现错误。

但是,当我单击时,submit我希望得到一个“clear” form,并且我只是打开它,但相反,我在我的input.

有没有什么优雅的方法可以将所有vuelidate字段clear重新设置为状态并获取clear表单?

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

  export default {
    data() {
      return {
        email: ''
        //there could be a lot of props
      }
    },
    methods: {
      onSubmit() {
        if (!this.$v.$invalid) {
          const user = {
            email: this.email,
            //there could be a lot of props
          };

          console.log(user);

          this.email = '';
        }
      }
    },
    validations: {
      email: {required, email} …
Run Code Online (Sandbox Code Playgroud)

vue.js vuejs2 vuelidate

2
推荐指数
1
解决办法
6985
查看次数

审查如何有条件地禁用“提交”按钮

如果所有字段都不符合要求的条件,如何有条件地禁用我的Vuelidate表单的“提交”按钮?

我尝试了以下内容,但:disabled只接受其中的“禁用”一词。

<form>
  <ol>
    <li class="inputQuestion" v-bind:class="{ 'error': $v.user.username.$error }">
      <label>Username:</label>
      <input v-model.trim="user.username" @input="$v.user.username.$touch()" />
    </li>
    <li class="inputQuestion" v-bind:class="{ 'error': $v.user.password.$error }">
      <label>Password:</label>
      <input v-model.trim="user.password" @input="$v.user.password.$touch()" />
    </li>

    <li class="submission">
      <button @click.prevent="submitForm" :disabled="$v.form.valid()">Sign In</button>
    </li>
  </ol>
</form>
Run Code Online (Sandbox Code Playgroud)

vuejs2 vuelidate

1
推荐指数
1
解决办法
3217
查看次数

检查是否为真

我有一个自定义复选框

<checkbox v-model="form.terms_accepted" />
Run Code Online (Sandbox Code Playgroud)

true / false值可以很好地切换

{
"first_name": "", 
"last_name": "", "username": "", 
"email": "", "terms_accepted": true 
}
Run Code Online (Sandbox Code Playgroud)

如何验证真实值?

目前,我的验证规则是。

terms_accepted: {
         required
},
Run Code Online (Sandbox Code Playgroud)

vue.js vuejs2 vuelidate

1
推荐指数
1
解决办法
718
查看次数

Vue JS vuelidate自定义验证

我正在创建基本的库存管理系统。在此,我要验证的发票中,用户输入的价格必须大于或等于最低销售价格。我使用vuelidate软件包进行验证。

任何线索如何使用vuelidate实现这一目标

javascript vue.js vue-component vuejs2 vuelidate

1
推荐指数
1
解决办法
5974
查看次数

计算属性的验证验证

在我的 Vue 组件中,我有 3 个数字字段,如下所示:

data() {
    return {
        numberAdults: 0,
        numberChildren: 0,
        numberInfants: 0,
    }
Run Code Online (Sandbox Code Playgroud)

还有一个计算属性:

computed: {
    numberPersons() {
        return this.numberAdults + this.numberChildren + this.numberInfants
    },
Run Code Online (Sandbox Code Playgroud)

我想验证至少设置了一个人(至少一名成人或一名儿童或一名婴儿),但我无法使其发挥作用。这是验证规则:

numberPersons: {
    required,
    minValue: minValue(1),
},
Run Code Online (Sandbox Code Playgroud)

如果我更改numberPersons三个字段之一,则该字段的验证有效。我认为 Vuelidate 不知何故不知道是什么numberPersons,但我不知道如何改变它。

vue.js vuelidate

1
推荐指数
1
解决办法
4144
查看次数

为什么这个 vuelidate 函数不能在设置内工作,而只能在方法之外工作?

我正在将 vuelidate 与组合 API 一起使用,但我不明白为什么v$.validate()当我放入 inside methods、 aftersetup而不是 inside 时,它​​可以正常工作setup

所以这有效:

setup() {
  // inspired from 
  // https://vuelidate-next.netlify.app/#alternative-syntax-composition-api
  const state = reactive ({
    // the values of the form that need to pass validation, like:
    name: ''
  })

  const rules = computed (() => {
    return {
      // the validation rules
    }

  const v$ = useVuelidate(rules, state)

  return {
    state,
    v$
  }
},
methods: {
  async submitForm () {
    const result = await …
Run Code Online (Sandbox Code Playgroud)

vuelidate vuejs3 vue-composition-api

1
推荐指数
1
解决办法
2380
查看次数

全局设置内置验证器的 Vuelidate 自定义错误消息

我正在使用最新版本的 Vuelidate 和 Vue 3。有没有办法为内置验证器全局设置错误消息?我在文档中看到这一部分,它说要withMessage在辅助对象上使用该函数,如下所示:

import { required, helpers } from '@vuelidate/validators'

const validations = {
  name: {
    required: helpers.withMessage('This field cannot be empty', required)
  }
}
Run Code Online (Sandbox Code Playgroud)

但这看起来像是每次我们构建规则对象时都需要设置。

vue.js vuelidate vuejs3

1
推荐指数
1
解决办法
2362
查看次数

使用 Vue 2.6 和 Composition API 进行 Vuelidate

我将 Composition API 与 Vue 2(通过使用@vue/composition-api)结合使用,并结合以下两个库(@vuelidate/core": "^2.0.0-alpha.18@vuelidate/validators": "^2.0.0-alpha.15)。

我正在尝试检查sameAs输入的电子邮件和重复的电子邮件是否匹配,如果不匹配则返回错误。尽管这并没有想象中那么顺利。

这是我的validation.js文件

import { required, email, maxLength, sameAs } from "@vuelidate/validators";

export default {
  email: {
    required,
    email,
    maxLength: maxLength(100),
  },
  repeatEmail: {
    required,
    email,
    maxLength: maxLength(100),
    sameAsEmail: sameAs('email')
  },
}
Run Code Online (Sandbox Code Playgroud)

这是我的validation-errors.js文件。(不过可能与这个问题无关)

export default { 
  email: [
    {
      key: "required",
      message: "Email is required.",
      id: "emailRequired",
    },
    {
      key: "email",
      message: "Wrong format on your email.",
      id: "emailFormat",
    },
    { …
Run Code Online (Sandbox Code Playgroud)

vue.js vuelidate vue-composition-api

0
推荐指数
1
解决办法
2209
查看次数