VeeValidate表单不会运行提交表单功能
VeeValidate是一个基于Vue.js的表单验证插件，它提供了一种简单且灵活的方式来验证表单输入。它可以帮助开发人员轻松地验证用户输入的数据，并在用户提交表单之前进行验证。
VeeValidate的主要特点包括：
- 简单易用：VeeValidate提供了一组简单的指令和验证规则，可以轻松地应用于表单元素上。
- 灵活性：VeeValidate允许开发人员自定义验证规则，以满足不同的业务需求。
- 实时验证：VeeValidate可以实时验证用户的输入，并在用户输入时提供实时反馈。
- 多语言支持：VeeValidate支持多种语言，可以根据用户的语言环境显示相应的验证错误信息。
- 验证规则丰富：VeeValidate提供了多种内置的验证规则，包括必填字段、最大长度、最小长度、邮箱格式、手机号码格式等。
VeeValidate适用于任何需要表单验证的场景，例如用户注册、登录、数据提交等。它可以帮助开发人员确保用户输入的数据符合预期，并提供友好的错误提示信息。
对于VeeValidate的使用，腾讯云并没有直接相关的产品或服务。然而，腾讯云提供了一系列与Vue.js和前端开发相关的产品和服务，例如云开发、云函数、CDN加速等，可以帮助开发人员构建和部署基于Vue.js的应用程序。
更多关于VeeValidate的详细信息和使用示例，您可以访问官方文档：VeeValidate官方文档。
相关·内容
1回答
我对表单中的每一个输入都使用了veevalidate规则。在提交有效数据后，所有这些数据都已成功发送到后端，但在前端，每个输入都突出显示为无效。 ? 我已经添加了来自veevalidate的重置方法，以在选择提交时取消设置任何错误。但它不起作用。下面是我的代码的一部分 beforeSubmit() {
this.$validator.pause();
this.$nextTick(() => {
this.$validator.errors.clear();
this.$validator.fie
浏览 13提问于2019-07-03得票数 0
回答已采纳
我正在使用Vuetify，并且有一个使用VeeValidate进行表单验证的表单。当我使用这个：
this.$validator.validateAll().then((result) => {
console.log("result form", result);
//result ? this.onSubmit() : scrollTo(0, 250);
});
它总是返回true，即使我输入字段上的验证无效.输入内容如下：
<v-textarea
filled
name="
浏览 3提问于2019-10-16得票数 2
回答已采纳
下面是我的密码。我想在提交过程中验证该表单。我阻止提交行动，直到所有的数据是有效的。因此，我使用了"validata ()“方法。如果表单有空/无效日期，它应该警告“未提交”.Else它应该警告“提交”。我的问题是，当我第一次点击提交按钮时，警报显示为“提交”而不是“未提交”。但是，当我第二次或更远地单击相同的按钮时，它将正确显示为“未提交”。我不知道原因，为什么它在第一次不起作用。
<template>
<div id="app">
<h1>Add Items</h1>
浏览 1提问于2018-05-03得票数 0
我正在尝试构建一个严格使用类型记录输入的vue.js项目。
我使用VeeValidate构建一个表单。我使用对VeeValidate ValidationObserver的引用来处理提交的表单。我也使用vue类组件。
下面是我如何尝试在代码中键入ValidationObserver组件。
<template>
<ValidationObserver tag="form" ref="repertoireForm" @submit.prevent="submitForm">
<ValidationProvid
浏览 8提问于2019-10-03得票数 5
这是我第一次使用VeeValidate。当一个表单域有效时，如何启用/禁用该表单域？例如，只需在veevalidate检查用户字段有效后启用密码字段。
浏览 15提问于2020-05-01得票数 0
回答已采纳
1回答
我在表单中使用了validate指令来验证内容。
<input type="text" v-model="address" name="address" ref="address" v-validate="{ regex:/^([0-9]+|[0-9]+,[0-9]{0,2}?)$/ }" data-vv-validate-on="blur">
但它返回的错误如下：
vue.runtime.esm.js?2b0e:619 [Vue warn]: Failed to resolve dir
浏览 0提问于2020-04-18得票数 1
是否可以在VeeValidate (选项classNames)中设置多个类？
我使用VeeValidate进行Vue.js表单验证。有一些选项：'classes: true，classNames:有效和无效的css类‘。
我想使用引导‘警报-警告’。但是，当我在下面添加类名时，会收到以下错误消息：
DOMException:未能在‘DOMTokenList’上执行'remove‘：所提供的令牌(’警报-警告‘)包含HTML空格字符，这些字符在令牌中无效。
除了创建一个新的css类之外，还有其他解决方案吗？
代码：
Vue.use(VeeValidate, {
class
浏览 0提问于2019-01-03得票数 1
回答已采纳
我在Laravel5.8和Vue上是新的，我使用和一个基本的登录表单：
方法=“POST”和values: csrf_token的电子邮件、密码和_token
还有一个这样的按钮：
<v-btn>@click="validate">Login</v-btn>
当用户单击按钮时，将调用vue方法验证：
methods: {
validate() {
this.$validator.validateAll().then((result) => {
if (resu
浏览 0提问于2019-05-22得票数 1
我正在尝试使用Vue 2.5和VeeValidate 2.1来使用VeeValidate来验证Vue表单中的字段。按照文档的说明，我将验证如下所示的字段：
<input class="form-control"
name="contact-email"
id="contact-email"
type="email"
v-model="contact-email"
v-validate="'required|email'"
>
<span v-if="er
浏览 3提问于2018-06-14得票数 0
我正在测试一个表单组件，所有的字段都是用vee-validate验证的，目前我在我的包装器中注入了一个验证器
import VeeValidate from "vee-validate";
Vue.use(VeeValidate, { errorBagName: "errors" });
describe("ContactForm.vue", () => {
const v = new VeeValidate.Validator();
beforeEach(() => {
options = {
sync
浏览 2提问于2018-10-18得票数 9
我正在使用vue create CLI构建一个定制的Vue JS插件。我已经导入了我的各种包，但是，当尝试在VeeValidate中使用自定义设置时，会出现一个错误。
plugin.js
/*
* NOTE:
* This file is plugin stub for main.js
*/
// Import required packages
import Vue from 'vue'
import VeeValidate from 'vee-validate'
import VueResource from 'vue-resource&
浏览 0提问于2019-05-16得票数 2
使用Laravel和vue设置，并希望在某些表单上使用vee-validate
我通过NPM安装，然后添加了我的app.js。
import VeeValidate from 'vee-validate'
Vue.use(VeeValidate);
也尝试过
window.VeeValidate = require('vee-validate');
Vue.use(window.VeeValidate);
在我的组件中
<div class="form-group">
<label for="exam
浏览 46提问于2019-07-31得票数 2
回答已采纳
我有这个脚本，它在通过api发布表单后，在特定字段中手动添加错误消息。
this.errors.add('registration-form.shipping_vmoney_email_address',response.data.message);
这是我的HTML：
<input autocomplete="new-email" nofill v-model="shipping_vmoney_email_address" name="shipping_vmoney_email_address" v-validate=&#
浏览 3提问于2017-08-09得票数 2
我需要集成Bootstrap-Vue输入表单控件和VeeValidate。VeeValidate运行良好，但我需要在出现错误时将错误行为记录到文本字段中。现在，我可以在字段下面看到错误，但文本字段周围的绿色轮廓仍然带有复选标记。 ? <validation-provider rules="odd" v-slot="{ errors }">
<b-form-group
id="fieldset-1"
label="Last Name"
label-fo
浏览 15提问于2020-09-16得票数 1
回答已采纳
1回答
我有一张表格上面写着。在表单提交时，数据将被发送到父级，然后我需要重置表单。按照veevalidate指令，应该可以通过$refs重置表单。
使用：设置参考资料
用：重置表单
我的应用程序在TypeScript中，按照指南，我的组件如下所示：
<template>
<div>
<ValidationObserver v-slot="{ handleSubmit }" ref="form">
<form :model="form" @submi
浏览 3提问于2020-08-02得票数 1
回答已采纳
我看了许多VeeValidate表单的例子。它们似乎都只关注验证部分，并且使用初始值属性。据我所知，这只能使用静态数据，但在我的示例中，我使用onMounted中的异步API调用来加载对象(带有嵌套对象和数组)。
如何在加载完来自API的数据后填充表单？
浏览 13提问于2022-10-19得票数 0
我正在用VeeValidate插件验证输入字段(所需的最小长度3)。它运行得很好，但我如何避免调用onInput操作(以避免在输入无效时(一旦输入无效-无效切换为false )立即提交)
简短地说:当输入字段aria-无效是false/true时，是否可以切换调用/不调用onInput：'changeTitle‘？
谢谢你的反馈
ChangeTitleComponent.vue
<template>
<div>
<em>Change the title of your shopping list here</
浏览 3提问于2017-09-20得票数 0
回答已采纳
在我的场景中，我有一个h:inputText，我向它添加了一个valueChangeListener属性，值更改事件是在bean中实现的。当提交表单时，即使在那时valuechangeListener也会被调用。但我要求，当我对输入文本进行更改时，值更改侦听器才会运行。请帮我弄一下这个。
h:inputText是否仅在提交页面时触发valuChangeListener？？
浏览 1提问于2014-05-20得票数 0
1回答
我试图在不使用的情况下使用npm install --save插件进行表单验证，所以我将dist文件夹中的文件复制到我的项目中，但由于某些原因，我无法正确地使用插件。
这就是我如何将插件作为脚本在我的pug文件register.pug中调用。
block main-content
.article#register
form
input(
v-model="email"
v-validate.initial="'required|email'"
:class="{'input&#
浏览 0提问于2018-03-16得票数 0
回答已采纳
好的，这是情况，我正在用Vue.js做一个SPA。我在我的组件中使用VeeValidate，比如在Component1.vue中，
import Vue from 'vue';
import VeeValidate from 'vee-validate';
Vue.use(VeeValidate);
export default {
//...
}
在另一个组件中，比如在Component2.vue中，我使用的是vuetable-2，我是这样注册的，
import Vuetable from 'vuetable-2/src/component
浏览 2提问于2018-04-09得票数 1
1回答
我正在尝试使用vee-validate创建一个简单的表单验证页面。不过，有些东西似乎坏了，我不确定我到底做错了什么。
我是如何得到错误的：errors not defined。
<!DOCTYPE html>
<html>
<head>
<head>
<body>
<div id="app">
<h1>asdfasd</h1>
<form action='#' method='POST'>
<inp
浏览 1提问于2019-11-22得票数 0
使用jquery.validate ()库和ASP MVC3 RTM jquery.validate.ubobtrusive库，我想知道是否有一个钩子可以在提交实际表单之前注入一些额外的逻辑来进行后验证。
换句话说:表单正在提交，验证运行(不管它通常做什么)，验证发现没有理由停止表单提交，在这里运行我的代码，然后正常提交。
我知道我可以处理表单的submit事件，并执行如下操作：
$('#MyForm').submit(function() {
if (!$(this).valid())
return false;
// My Code Here
浏览 2提问于2011-06-13得票数 2
我使用VeeValidate和Yup进行表单验证，并且不知道为什么在提交时将带有type="number“的输入字段转换为string。
当我输入78并提交表单时，console.log在onSubmit(values)函数中的输出如下：
values: {
prioritaet: "78"
}
我是不是做错了什么，还是这是VeeValidate和Yup的正常行为？我想要一个数字，而不是一个字符串后提交。
我的代码如下所示：
<template>
<div class="container m-3">
<d
浏览 5提问于2021-06-10得票数 1
回答已采纳
1回答
我使用webpack和实例VeeValidate的方式如下：
import VeeValidate from 'vee-validate';
Vue.use(VeeValidate, {
// This is the default
inject: true,
// Important to name this something other than 'fields'
fieldsBagName: 'veeFields'
});
我有一个vuejs组件为用户创建订阅电子邮件。问题是，当我使用$validator.
浏览 1提问于2019-03-15得票数 0
我得到了表单的一个主要组件和部分的三个组件
现在在主表单中，我有提交按钮，我想用它来向服务提交所有的区段数据？
我如何才能做到这一点？
是否在所有部分组件中使用输出事件发射器，并在提交之前获取主表单组件中的数据？
谢谢
我正在angular2中创建一个表单(包含多个部分)，此表单将成为审批工作流的一部分。
工作流将不在angular2中，尽管表单将从工作流中引用。当我们从工作流的不同阶段打开表单时，它将允许用户仅查看或编辑表单的某些部分。
我应该如何设计我的带有部分的表单？
1)整个表单使用一个组件？
2)每个部分都有单独的组件，并且有一个主要的父组件？
在表单加载时；运行业务逻辑检查，以确
浏览 1提问于2016-11-18得票数 1
我用来建立我的幼体。
当我在幼虫中调用这些文件时，我会得到一个空白页。
我的文件结构如下：
app.js文件的内容如下：
import Vue from "vue"
import App from "./components/App.vue"
import store from "./components/store"
import VeeValidate from "vee-validate"
Vue.use(VeeValidate);
import "./components/directives"
浏览 5提问于2019-10-22得票数 0
我已经得到了一个表单，其中的输入是用v-for循环动态添加的。每个字段都应该经过验证，在用户提交表单之前，应该检查它是否有效。问题是，即使输入无效，this.$validator.validateAll()也总是返回true。我哪里做错了？ <div id="app">
<v-app id="inspire">
<v-flex md4 offset-md4>
<form data-vv-scope="photoForm">
<v-text-field v-for=&#
浏览 15提问于2019-06-18得票数 2
回答已采纳
我想在提交表单时运行JavaScript函数。问题是，当表单提交时，页面会被重新加载，并且表单值将作为GET参数附加到URL。我希望它停留在当前页面上，并且只运行JavaScript函数。
我想知道避免页面重新加载和发送参数的最佳实践(或者您应该做什么)。
浏览 0提问于2011-11-11得票数 51
回答已采纳
2回答
在javascript函数中，我是submitin一个表单：
form.submit();，
有大量的数据。
除了单击浏览器的停止按钮之外，还可以取消此操作吗？
更新：
也许我没说清楚我是在提交大文件。
在iframe中运行的具有上载控制的表单。
浏览 4提问于2009-08-26得票数 0
首先，我运行的是WFFM 2.3.0rev.130118。
我有一个带有验证码字段的表单。如果我将Captcha字段设置为始终显示，则一切正常。如果验证码字段配置为显示是否满足特定的检测阈值，据我所知，验证码永远不会显示。
以下是检测阈值对话框的屏幕截图：
我之所以说“据我所知”，是因为在您的本地开发环境中复制“可疑表单活动”可能有点困难。但是，正如您所看到的，我已经将访问者提交值设置为5分钟内3次。如果我提交表单的次数超过了这个阈值，我就永远不会看到验证码。
除了Captcha字段之外，它是一个基本的联系我们表单，有4个文本字段，没有什么花哨的东西，WFFM实际上是一个“股票”配置
浏览 0提问于2014-01-18得票数 2
我有一个用BootstrapVue构建的表单。为了验证表单输入，我遇到了VeeValidate。
select输入是较长窗体的一部分，目前如下所示：
<form action="">
...
<b-form-select size="sm" v-model="selected" class="mb-2 form-group">
<option :value="null" disabled>Payments per Year</option>
<
浏览 3提问于2019-12-18得票数 0
回答已采纳
我正在使用VeeValidate，并且非常适合英语(这是默认的)，但是，如果我尝试使用任何其他语言，我就会发现一个错误：“属性'locale‘在’Validator‘类型上不存在。”
这是我的代码：
import VeeValidate from 'vee-validate';
import french from 'vee-validate/dist/locale/fr';
Vue.use(VeeValidate);
@Component
export default class TestTest extends Vue {
locale: any
浏览 1提问于2017-08-31得票数 0
回答已采纳
2回答
有趣的bug，似乎只限于IE和Webkit。我有一个基本的表单设置：
<div id="output">Form output is displayed here</div>
<form id="myForm" action="#" method="post">
<input type="text" name="username" id="usernameInput" />
<input type="submit"
浏览 3提问于2009-09-23得票数 0
回答已采纳
我找到了一个弹琴的例子，我分叉，然后编辑。我不明白这是怎么回事，也不知道怎么解决。在我的示例中，我使用带有值的复选框，但当我单击复选框时，值将更改为true或false，具体取决于是否单击了复选框。
const Checkboxes = {
template: '#checkboxTmpl',
data() {
return {
text: '',
options: [
{
name: 'Web',
slug: 'web'
},
浏览 0提问于2018-09-11得票数 3
回答已采纳
我在af:form标签下有几个UI组件。如果我使用它的绑定(AdfFacesContext.getCurrentInstance().addPartialTarget(Componentbinding)在任何组件上应用部分触发器，它会提交整个表单吗？通常，如果是一个简单的jquery ajax调用，我们可以在不提交表单的情况下获得唯一需要的数据。部分页面呈现是否也遵循整个ADF生命周期，仅仅是为了刷新一个组件？请解释一下？
浏览 0提问于2017-11-08得票数 1
1回答
我已经创建了两个模型(loginModal和registerModal)，用户可以在它们之间动态切换。
"VeeValidate“插件有一个问题，只有当我向错误包中添加了什么内容时，它才会验证第一个字段。
我在这里为这个问题创建了一个演示：来源：
打开loginModal (默认情况下它将打开)。
提交默认登录信息(您将看到“您输入了无效凭据”消息)。
在看到该消息后将切换到注册模式。
提交注册模式(输入为空)
如您所见，它只突出显示第一个字段(全名字段)，而忽略其他字段。
为什么会发生这种事？
浏览 1提问于2019-04-17得票数 1
回答已采纳
当在google /edge上填写表单时(在firefox上不发生)，然后按回页按钮，然后按前页按钮，就会发现浏览器维护表单中的信息的奇怪情况。当提交表单时，没有一个值保存到与其关联的$scope值中，则会出现此问题。我怎样才能禁用google/edge这样做，或者让它这样做，当他们这样做时，$scope被更新？
浏览 4提问于2022-08-18得票数 0
我试图使用ValidationObserver创建一个使用vee验证3.0的小提琴，但我遇到了一个问题，就是试图添加行：
import {ValidationObserver, ValidationProvider, extend} from 'vee-validate'
import {required, email, url} from 'vee-validate/dist/rules'
控制台出错了：
Uncaught SyntaxError: Cannot use import statement outside a module
这是用错误保存的：
怎
浏览 1提问于2019-12-21得票数 0
回答已采纳
我在jquery应用程序中有一个表单，我正尝试通过AJAX提交它，但是每当我用ASP.NET替换表单提交时，如下所示：
$('#formID').submit(function() { });
它仍然在表单中返回实际的post，而不是jquery接管，我是不是做错了什么？
浏览 4提问于2009-11-03得票数 0
回答已采纳
我有一个带按钮的表格，我不知道要提交什么表格，但它们是(必然)提交按钮。我给了他们"cancel“类，在第一次点击时，他们就取消了提交。想要的效果。但是，随后的任何单击都会恢复到正常状态；提交表单。我可不想这样。
现在，我确实有一些回发发生在点击这些按钮。我尝试在pageLoad而不是document.ready上运行$('form').validate({...})；函数，但这完全停止了验证工作。
其中一个按钮的HTML为：
<input type="submit" class="btncat_deselected cancel"
浏览 1提问于2010-05-18得票数 1
回答已采纳
对部件进行单元测试很好.不管如何运行覆盖率，我可以看到main.js文件中的一些代码行没有涵盖.main.js文件也应该进行测试吗？
所有与Vue相关的代码行如下：
Vue.use(VeeValidate, {..
Vue.use(Vuetify, { ..
Vue.config.productionTip = false; ..
new Vue({
router,
store,
i18n,
render: h => h(App)
}).$mount("#app");
没有被覆盖..。还是应该将main
浏览 0提问于2018-10-19得票数 4
回答已采纳
1回答
我试图使用以下规范文件测试submit表单事件：
ContactForm.spec.js
import Vue from "vue";
import Vuex from "vuex";
import { storeMock } from "./mocks.js";
import VeeValidate from "vee-validate";
import i18n from "@/locales";
import Vuetify from "vuetify";
import { mount,
浏览 0提问于2018-10-04得票数 0
1回答
对于我的Vuejs应用程序，我使用进行验证。目前，它正在将有效的URL(如http://localhost:3000 )标记为无效。
这也发生在他们的样本上：
如果在示例中输入http://localhost:3000，您将看到消息The field field is not a valid URL.
浏览 2提问于2017-10-20得票数 2
回答已采纳
1回答
在我的VueJS应用程序中，我正在使用Vee验证插件进行表单验证。因此，我的应用程序有超过一种语言，为此，我使用的是I18n。我使用的所有插件都位于plugins文件夹下的单独文件中，然后在main.js中获取所有文件并注册所有插件，因此在我的Vee-Validate.js中，我编写了：
import Vue from 'vue';
import VueI18n from 'vue-i18n';
import VeeValidate from 'vee-validate';
import enMessages from "./../loc
浏览 0提问于2019-08-22得票数 1
在提交表单时，似乎有一个计时问题，即submit()不会立即运行，接下来的几行Javascript会在表单实际提交之前运行。
var eButtons = document.querySelector("#ContactUs_form #buttons");
function submitForm() {
document.getElementById("ContactUs_form").submit();
eButtons.origInnerHtml = eButtons.innerHTML;
eButtons.innerHTML = "Sa
浏览 0提问于2017-01-25得票数 0
4回答
我希望允许用户发布一个表单，并让它触发其他进程，例如发送电子邮件和执行功能。但是，如果我与提交表单的用户一起运行这个内联，那么表单提交将需要很长时间。
如果我是在共享宿主环境中，那么有哪些选项可以异步运行进程？
浏览 5提问于2014-09-03得票数 0
回答已采纳
1回答
我在部分视图中有一个表单，其中包含一个必需的字段。我尝试提交表单并得到一个验证错误，这是预期的行为。现在，我填写了所需的字段并提交了表单，我的controllerAction替换了部分视图。
现在，我再次清空所需的字段，并尝试再次提交-并且表单被提交。我得到验证错误很难，但我的页面是发送一个后请求。
这里发生了什么事？
编辑
Zruty给出了正确的答案，我更新了我的ajaxSetup：
$j.ajaxSetup({
statusCode: {
200: function (data, textStatus, jqXHR) {
$.validato
浏览 6提问于2011-11-29得票数 1
回答已采纳
我有一个v-for循环，它允许我动态地向我的表单中添加新字段。在进入表单的下一部分之前，这个循环位于一个选项卡中，我需要对其进行验证。当我将v-for放在我的验证观察者中时，似乎什么都没有呈现。还有别的方法可以做到这一点吗？
我用的是VeeValidate 3
<template>
<div>
<b-card class="mb-3">
<ValidationObserver :ref="'contact_obs'" v-slot="{ invalid }">
浏览 1提问于2019-08-27得票数 3
回答已采纳
我有一个PHP Facebook应用程序，它在iFrame中运行，并且在https下运行。当我的应用程序的用户提交表单时，结果会在一个新窗口中弹出。这不是我们想要的行为。当我在http下运行它的时候，我没有遇到这个问题。在表单标签上，我已经将目标设置为返回到iframe_canvas，但这仍然是发送此消息的正确位置吗？target="iframe_canvas“。
你们中的任何一个人是如何设置FB应用程序在https下提交表单信息的？
浏览 0提问于2011-11-23得票数 0
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
即时通信 IM
腾讯会议活动推荐
腾讯云开发者
