提交前验证问题
Problems with validation before submit
我正在尝试从 VeeValidate 文档中获取一个示例来运行。可以找到here。我显然错过了一些东西,但我不知道是什么。
我的表单始终有效,即使我没有向输入中添加任何文本。我是否需要以某种方式自定义所需的规则?
CodeSandbox
<template>
<ValidationObserver ref="observer" v-slot="{ invalid }" tag="form" @submit.prevent="submit()">
<input type="text" rules="required">
<br>
<input type="text" rules="required">
<br>
<button :disabled="invalid">Submit</button>
</ValidationObserver>
</template>
<script>
import { ValidationObserver } from "vee-validate";
export default {
components: {
ValidationObserver
},
methods: {
async submit() {
const isValid = await this.$refs.observer.validate();
console.log("Form is valid", isValid);
if (!isValid) {
// ABORT!!
}
// ship it
}
}
};
</script>
每个输入都需要包装在 ValidationProvider
中。改变这个:
<input type="text" rules="required">
为此:
<ValidationProvider rules="required">
<input type="text" rules="required" v-model="something">
</ValidationProvider>
此外,在某处,您需要实际定义要使用的规则,因此我在文件顶部放置了以下内容:
import { ValidationObserver, ValidationProvider, extend } from "vee-validate";
import { required } from 'vee-validate/dist/rules';
extend('required',required);
您的代码沙箱的工作副本(我还将 vee-validate 和 vue 更新到最新版本):https://codesandbox.io/s/vue-template-dj9jn
要实际获得示例中提到的行为,请尝试使用 handleSubmit
方法,而不是使用 ValidationObserver
的 invalid
标志:
<ValidationObserver tag="form" v-slot="{handleSubmit}" @submit.prevent>
...
<button @click="handleSubmit(submit)">Submit</button>
您的提交函数将如下所示:
submit() {
//anything you do here will only be called when the form is valid
}
我正在尝试从 VeeValidate 文档中获取一个示例来运行。可以找到here。我显然错过了一些东西,但我不知道是什么。
我的表单始终有效,即使我没有向输入中添加任何文本。我是否需要以某种方式自定义所需的规则? CodeSandbox
<template>
<ValidationObserver ref="observer" v-slot="{ invalid }" tag="form" @submit.prevent="submit()">
<input type="text" rules="required">
<br>
<input type="text" rules="required">
<br>
<button :disabled="invalid">Submit</button>
</ValidationObserver>
</template>
<script>
import { ValidationObserver } from "vee-validate";
export default {
components: {
ValidationObserver
},
methods: {
async submit() {
const isValid = await this.$refs.observer.validate();
console.log("Form is valid", isValid);
if (!isValid) {
// ABORT!!
}
// ship it
}
}
};
</script>
每个输入都需要包装在 ValidationProvider
中。改变这个:
<input type="text" rules="required">
为此:
<ValidationProvider rules="required">
<input type="text" rules="required" v-model="something">
</ValidationProvider>
此外,在某处,您需要实际定义要使用的规则,因此我在文件顶部放置了以下内容:
import { ValidationObserver, ValidationProvider, extend } from "vee-validate";
import { required } from 'vee-validate/dist/rules';
extend('required',required);
您的代码沙箱的工作副本(我还将 vee-validate 和 vue 更新到最新版本):https://codesandbox.io/s/vue-template-dj9jn
要实际获得示例中提到的行为,请尝试使用 handleSubmit
方法,而不是使用 ValidationObserver
的 invalid
标志:
<ValidationObserver tag="form" v-slot="{handleSubmit}" @submit.prevent>
...
<button @click="handleSubmit(submit)">Submit</button>
您的提交函数将如下所示:
submit() {
//anything you do here will only be called when the form is valid
}