Javascript 提交前的验证问题

我试图从VeeValidate文档中获得一个示例。可以找到它。很明显我遗漏了什么，但我不知道是什么

我的表单始终有效，即使我没有向输入中添加任何文本。我是否需要定制所需的规则？

提交
从“vee validate”导入{ValidationObserver}；
导出默认值{
组成部分：{
验证观察者
},
方法：{
异步提交（）{
const isValid=等待此操作。$refs.observer.validate（）；
log（“表单有效”，isValid）；
如果（！isValid）{
//中止！！
}
//每个输入都需要包装在一个
ValidationProvider
中。更改此选项：

<ValidationProvider rules="required">
    <input type="text" rules="required" v-model="something">
</ValidationProvider>

代码沙盒的工作副本（我还将vee validate和vue更新为最新版本）：

要实际获得示例中提到的行为，请尝试使用
handleSubmit
方法，而不是使用
ValidationObserver
的
invalid
标志，如下所示：

submit() {
    //anything you do here will only be called when the form is valid
}

您好，您的问题应该直接包括所有相关的代码。有代码沙盒的链接很好，但目标是让您的问题“独立”如果链接坏了。嗨，谢谢你指出这一点。我用代码更新了我的问题。谢谢，我将尝试使用
ValidationProvider
。但是我无法让你的CodeSandbox示例工作，我得到错误
。\u vm.handleSubmit不是一个函数
。我更新了沙盒并编辑了答案……现在handleSubmit调用在按钮上n在窗体内部，而不是直接在ValidationObserver上
import { ValidationObserver, ValidationProvider, extend } from "vee-validate";
import { required } from 'vee-validate/dist/rules';

extend('required',required);

<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
}