vue.js - Veevalidate:在 POST 请求之前验证表单?
问题描述
我正在使用Veevalidate和Buefy在 POST 请求之前验证表单。我能够正确验证表单,但 POST 请求方法在验证之前运行。
我对如何按顺序调用方法有点困惑:
- 验证表格
- POST 请求
密码沙盒: https ://codesandbox.io/s/mj1vy2vq0j
代码概述
<b-modal>
<form @submit.prevent="validateBeforeSubmit">
...
...
<button type="submit" class="button is-primary" @click="postItem()">Submit</button>
<button type="button" class="button" @click="isAddModalActive=false">Cancel</button>
</form>
</b-modal>
<script>
...
methods: {
validateBeforeSubmit() {
this.$validator.validateAll().then(result => {
if (result) {
this.$toast.open({
message: "Form is valid!",
type: "is-success",
position: "is-bottom"
});
}
this.$toast.open({
message: "Form is not valid! Please check the fields.",
type: "is-danger",
position: "is-bottom"
});
});
},
postItem() {
alert("postItem function was called");
}
}
</script>
解决方案
您可以在 validateBeforeSubmite() 函数中调用提交函数
methods: {
validateBeforeSubmit() {
this.$validator.validateAll().then(result => {
if (result) {
this.$toast.open({
message: "Form is valid!",
type: "is-success",
position: "is-bottom"
});
return this.postItem()// call your post function here and remove from @click in your submit button
}
this.$toast.open({
message: "Form is not valid! Please check the fields.",
type: "is-danger",
position: "is-bottom"
});
});
},
postItem() {
alert("postItem function was called");
}
}
推荐阅读
- java - 如果没有定义错误解码器,假装客户端中的 throws 声明是否无用?
- ios - 为什么可以从与 Swift 中的原始线程不同的线程中删除观察者?
- java - 如何修复 colors.xml 文件中的错误?
- android - Xamaring.Forms Android 8.0 - Visual Studio 2019
- javascript - 如何从(导出的默认)外部 const 块导出内部函数?
- javascript - 带有左右圆圈的插槽按钮
- linux - 将 libc6 包更新到最新版本
- c# - 为我的应用程序创建数据上传服务的最佳方式
- javascript - 同步填充/修改数组并在 Promise 中返回修改后的数组
- asp.net - 如何从我的手机访问我的本地主机网站?