标签: vee-validate
如何停止在 Vuetify 中显示内联验证错误消息？
当用户单击“提交”（不与输入元素内联）时，我需要在表单顶部的一个警报中显示所有表单验证错误。
如果我使用 Vuetify 和 Vee-Validation，如何抑制内联验证错误消息。（我将使用 $errors 数组在警报中显示错误）。文档中没有任何关于此的内容。
我尝试不在错误消息中传递任何内容，但随后我在无效字段上丢失了红色轮廓。
我的字段是这样配置的
<v-text-field
v-validate="'required|email'"
v-model="email"
:error-messages="errors.collect('email')"
label="Email Address*"
data-vv-name="email"
required
outline>
</v-text-field>
推荐指数
解决办法
查看次数
动态自定义组件上的 V-validate
我正在使用 Vee-validate ( https://baianat.github.io/vee-validate/ ) 来验证我的所有表单。现在我想做以下事情：
在我的表单中，“值”字段是一个动态组件，具体取决于type当前对象的。类型可以是integer,string等decimal。
因此，如果类型发生变化，输入也会发生变化。
我就是这样做的：
<component
:name="'attribute-value'"
v-model="attribute.value"
:is="attribute.type">
</component>
和
import string from '@/components/fields/String'
import integer from '@/components/fields/Integer'
import decimal from '@/components/fields/Decimal'
export default {
name: 'edit',
metaInfo: {
title: 'Edit'
},
components: {
string, integer, decimal
},
}
好吧 - 每个字段都应该有自己的验证。-字段integer应该只允许数字。所以我想这样做：
<template>
<b-input
:id="name"
:name="name"
type="number"
v-validate="{ required: true, numeric: true }"
:state="errors.has(name) ? 'invalid' : ''"
:value="value"
v-on:input="$emit('input',$event)"/>
</template>
<script>
export default { …推荐指数
解决办法
查看次数
veeValidate 3.x + Nuxt js：将自定义错误推送到 ValidationObserver
我使用 Nuxt js + veeValidate 3.x
我的插件看起来像这样：
import Vue from 'vue'
import {
ValidationObserver,
ValidationProvider,
extend
} from 'vee-validate'
import { required, email, min, confirmed } from 'vee-validate/dist/rules'
extend('required', {
...required,
message: 'This field is required'
})
extend('email', email)
extend('min', min)
extend('confirmed', confirmed)
Vue.component('ValidationProvider', ValidationProvider)
Vue.component('ValidationObserver', ValidationObserver)
作为插件添加到nuxt.config.js plugins: [{ src: '~/plugins/vee-validate.js', ssr: false }, ..
模板中，如下所示：
<ValidationObserver ref="registrationForm">
<ValidationProvider rules="required|email" name="Email Address" v-slot="{ errors }">
<div>
<input type="text" v-model.lazy="user.email"/>
<span class=form-errors">{{ errors[0] }}</span>
</div>
</ValidationProvider>
</ValidationObserver>
验证以这种方式完美运行：
methods: …推荐指数
解决办法
查看次数
Veutify v-file-input 验证
我想验证是否已使用 v-file-input 和 vee-validate 中的 ValidationProvider 选择文件。
下面是我的代码：
<v-flex>
<ValidationProvider rules="required" v-slot="{ errors }">
<v-file-input
show-size
accept=".xlsx"
placeholder="Click here to select your file"
label="File name"
:error="errors.length > 0"
:error-messages="errors[0]"
@change="selectFile"
>
</v-file-input>
</ValidationProvider>
</v-flex>
不知怎的，验证有效，但即使在我选择了一个文件之后它也工作得很好：
我不确定我做错了什么？
推荐指数
解决办法
查看次数
vee 验证正则表达式不起作用
我需要使用带有这个基本正则表达式的vee-validate 来验证美国电话号码 XXX-XXX-XXXX : (?:\d{3}-)\d{3}-\d{4}。正则表达式本身工作正常，但不适用于 vee-validate，我不确定为什么。
标记
<!DOCTYPE html>
<html>
<head>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vee-validate@latest/dist/vee-validate.js"></script>
</head>
<body>
<div id="app">
<form action='#' method='POST'>
<input v-validate="'required|regex:^(?:\(\d{3}\)|\d{3}-)\d{3}-\d{4}$'" :class="{'input': true, 'is-danger': errors.has('phone_primary') }" class="input is-info" type="text" name='phone_primary' value="$phone_primary" placeholder="404-555-1212" size="15">
<span v-show="errors.has('phone_primary')" class="help is-danger">{{ errors.first('phone_primary') }}</span>
<button class="button is-link" name='submitform' value='go'>Submit</button>
</form>
</div>
<script>
Vue.use(VeeValidate);
new Vue({
el: '#app',
template: '#app',
data: {
phone_primary: null
}
});
</script>
</body>
</html>
我做错了什么，正则表达式没有按预期工作？
推荐指数
解决办法
查看次数
如何修复 nuxtjs + heroku 中的页面 ChunkLoadError: Loading chunk 0 failed.？
我已经使用 nuxtjs 和 vee-validate 创建了一个应用程序，并将其部署到heroku，但是在本地（nuxt build 和 nuxt 在本地计算机中启动），当我按下登录按钮验证时，vee-validate 发生了一切都很好，但在heroku 应用程序中，当按下登录时按钮整个页面刷新，还有“？” 附加在 URL 末尾，例如：- 登录 登录？当点击登录按钮时。帮助我识别这个问题。谢谢，似乎 js 没有运行。
推荐指数
解决办法
查看次数
将 VeeValidate 与 Vue 一起使用时如何修复“TypeError: plugin is undefined”错误
当我添加：
Vue.use(VeeValidate);
我的 Vue 页面显示空白并显示控制台错误：
TypeError: plugin is undefined
我发现以下有同样的错误：
但我没有在我的 .vue 文档中的任何地方使用 => 语法。
vee 验证 3.0.3，Vue 2.6.10
完整的 main.js 文件：
import Vue from 'vue'
import VeeValidate from 'vee-validate';
import App from './App.vue'
Vue.config.productionTip = false
Vue.use(VeeValidate);
new Vue({
render: h => h(App),
}).$mount('#app')
在我的 App.vue 文件中，我确实将 ValidationProvider 作为组件包含在内：
<script>
import CriteriaDataModel from './data-model/criteria-data-model.js';
import UserDataModel from './data-model/user-data-model.js';
import { ValidationProvider } from 'vee-validate';
export default {
name: 'app',
data: function() {
return {
criteriaModel: …推荐指数
解决办法
查看次数
vee-validate 错误消息没有字段名称
我正在尝试使用 vee-validate 3。版本 3 发生了很多变化。问题是错误消息没有特定的字段名称。以下是我在 laravel Blade 文件中的代码：
<validation-provider rules="email" v-slot="{ errors }">
<input type="text"
class="input"
name="email"
v-model="email">
<span>@{{ errors[0] }}</span>
</validation-provider>
当我开始在输入字段中输入时，错误消息会打印在跨度标记内，但它没有字段名称，而是一个通用的“字段”，如下所示：
{field} is not valid.
有人知道如何让它工作吗？
谢谢，
推荐指数
解决办法
查看次数
如何将自定义组件 vee-validate 与 v-model 结合使用？
我有一个名为 TextInput 的组件。我需要在此组件中发送带有 @input 事件的 v-model，但我也希望它使用 vee-validate 进行验证。
但是当我在 usefield 中使用 handleChange 函数时，它会进行验证。但这次我无法使用 v-model 发送值。
当我这样做时，我可以在我调用的组件中使用v-model时使用v-model，但它不执行验证过程。
<template>
<div
class="TextInput"
:class="{ 'has-error': !!errorMessage, success: meta.valid }"
>
<label :for="name">{{ label }}</label>
<input
:name="name"
:type="type"
:id="name"
:value="modelValue"
:placeholder="placeholder"
@input="handleChange"
@blur="handleBlur"
v-bind="$attrs"
/>
<p class="help-message" v-show="errorMessage || meta.valid">
{{ errorMessage || successMessage }}
</p>
</div>
</template>
<script>
import { useField } from "vee-validate";
export default {
props: {
type: {
type: String,
default: "text",
},
modelValue:String,
value: {
type: String,
default: "",
}, …推荐指数
解决办法
查看次数
Vue：类型“Ref<unknown>”不可分配给类型“string”.ts(2322)
我正在使用 Vue3 、 type script 、composition 和 vee-validate4 以及 Pinia 存储
\n这是用户注册。
\n浏览/注册
\nconst schema = yup.object({\n email: yup.string().required().email("\xd9\x84\xd8\xb7\xd9\x81\xd8\xa7 ! \xd8\xa7\xdb\x8c\xd9\x85\xdb\x8c\xd9\x84 \xd9\x85\xd8\xb9\xd8\xaa\xd8\xa8\xd8\xb1 \xd9\x88\xd8\xa7\xd8\xb1\xd8\xaf \xda\xa9\xd9\x86\xdb\x8c\xd8\xaf ."),\n password: yup.string().required().min(8, "\xda\xa9\xd9\x84\xd9\x85\xd9\x87 \xd8\xb9\xd8\xa8\xd9\x88\xd8\xb1 \xd8\xa8\xd8\xa7\xdb\x8c\xd8\xaf \xd8\xad\xd8\xaf\xd8\xa7\xd9\x82\xd9\x84 \xd9\x87\xd8\xb4\xd8\xaa \xda\xa9\xd8\xa7\xd8\xb1\xd8\xa7\xda\xa9\xd8\xaa\xd8\xb1 \xd8\xa8\xd8\xa7\xd8\xb4\xd8\xaf ."),\n});\n\nconst { errors, handleSubmit } = useForm({\n validationSchema: schema,\n});\n\nconst { value: email } = useField(\'email\');\nconst { value: password } = useField(\'password\');\n我这里有一个注册方法
\n浏览/注册
\nasync function add() {\n try {\n const res = await useAuthStore().register({email,password})\n } catch (err: any) {}\n}\n推荐指数
解决办法
查看次数
标签 统计
vee-validate ×10
vue.js ×6
javascript ×2
nuxt.js ×2
vuejs2 ×2
vuetify.js ×2
pinia ×1
regex ×1
typescript ×1
validation ×1
vuejs3 ×1
yup ×1