我找不到如何检查大于 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) 我有一个输入字段,我可以告诉Vuelidate它只接受alphaNum并Required像这样:
import { required, alphaNum } from "vuelidate/lib/validators";
export default {
data() {
return {
myInputValue: ""
};
},
validations: {
myInputValue: {
required,
alphaNum
}
}
};
Run Code Online (Sandbox Code Playgroud)
我的问题来了,我怎样才能myInputValue接受一个额外的字符点(.)?
哪个会完全接受这些东西
abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789.我怎样才能做到这一点?
我正在使用https://bootstrap-vue.org/docs/reference/validation#vuelidate,我遇到了
:state 作为 vue 属性。
我没有在文档中找到任何东西,我很困惑。它来自哪里,它有什么作用?实际上似乎我需要使用它来验证输入字段。但我宁愿使用@blur 而不是 state,但它不起作用。
假设我们有一个密码字段,并且我们想要对长度、特殊字符、数字、大写和小写等进行一些验证,前提是该字段有值
我们如何使用 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) 我正在尝试将 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验证器的简单表单。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)如果所有字段都不符合要求的条件,如何有条件地禁用我的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) 我有一个自定义复选框
<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) 我正在创建基本的库存管理系统。在此,我要验证的发票中,用户输入的价格必须大于或等于最低销售价格。我使用vuelidate软件包进行验证。
任何线索如何使用vuelidate实现这一目标
在我的 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,但我不知道如何改变它。
我正在将 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 和 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)
但这看起来像是每次我们构建规则对象时都需要设置。
我将 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)