Vue.js @submit.protect不使用vue md输入

当我点击“登录按钮”时，即使我没有在md输入中填写数据，它仍在运行， 我通过使用我的用户登录来测试onSubmit（）方法，它可以工作！ 我不认为我在方法上做错了什么，所以我猜我的表格是不正确的。 这是我的密码：

我的表格

 <form @submit.prevent="onSubmit">
    <login-card header-color="green">
      <h4 slot="title" class="title">CCRP Sign On</h4>
      <p slot="description" class="description">IT solution by เจ้เก๋ IT-PM</p>
      <md-field class="md-form-group" slot="inputs">
        <md-icon>account_box</md-icon>
        <label>ID...</label>
        <md-input v-model.trim="userId" type="text"></md-input>
      </md-field>
      <md-field class="md-form-group" slot="inputs">
        <md-icon>lock_outline</md-icon>
        <label>Password...</label>
        <md-input v-model.trim="password" type="password"></md-input>
      </md-field>
      <md-field class="md-form-group">
        <md-icon>announcement</md-icon>
        <label>Password...</label>
      </md-field>
      <md-button slot="footer" class="md-simple md-success md-lg" type="submit">Login</md-button>
    </login-card>
  </form>

你能帮我解决这个问题吗？

你对“防止”键的理解是不正确的。 它所做的只是在提交操作之后重新加载表单。但是，无论是否使用了“阻止”，都将调用“提交”操作。 它只是防止表单的默认功能在每次提交后重新加载

另一方面，您需要做的是在实际提交表单之前验证表单

例如：

/-需要“vuelidate”-npm安装vuelidate
从“vuelidate”导入{validationMixin}；
从“vuelidate/lib/validators”导入{required，email}；
导出默认值{
名称：“FormValidation”，
mixin:[验证mixin]，
数据：（）=>({
表格：{
电子邮件：空，
密码：null
},
userSaved:false，
发送：错误，
最后用户：空
}),
验证：{
表格：{
电邮：{
必修的，
电子邮件
},
密码：{
必修的
}
}
},
方法：{
getValidationClass（字段名）{
const field=this.$v.form[fieldName]；
如果（字段）{
返回{
“md无效”：字段$invalid和字段$dirty
};
}
},
clearForm（）{
这个。$v.$reset（）；
this.form.email=null；
this.form.password=null；
},
saveUser（）{
this.sending=true；
//在这里，您可以调用API，而不是超时
window.setTimeout（（）=>{
this.lastUser=`${this.form.email}`；
this.userSaved=true；
this.sending=false；
这个.clearForm（）；
}, 1500);
},
validateUser（）{
这个。$v.$touch（）；
如果（！this.$v.$invalid）{
这是saveUser（）；
}
}
}
};

.md进度条{
位置：绝对位置；
排名：0；
右：0；
左：0；
}

登录
电子邮件
电子邮件是必需的
无效电子邮件
密码
电子邮件是必需的
无效电子邮件
创建用户
用户{lastUser}}已成功保存！

谢谢！我安装了vuelidate并根据您的注释更改了代码，但它出现了一些错误，所以我尝试修复它，但仍然存在错误。$v.touch不是一个函数，我使用命令“npm install--save vuelidate”并像您一样导入我添加了“getValidationClass”“clearForm”“validateUser”并更改了“saveUser”

async saveUser（）{this.sending=true；const authData={userId:this.form.userId，password:this.form.password}；等待this.login（authData）。然后（（）=>{if（this.isAuthenticated）{this.$router.push（“仪表板”）；}否则{//（this.responseMsg=/）“由于密码或用户锁不正确而无法登录广告”），//（this.smallAlertModal=true）；console.log（-->-err======”；}），

应该是这样。$v.$touch（），在touch使用“this.$v.$touch（）之前检查您是否缺少另一个美元符号。$v.$touch（）'从一开始，现在我发现我的根prob是关于我的令牌的，您的代码运行良好，非常感谢！！

async onSubmit() {
      const authData = {
        userId: this.userId,
        password: this.password
      };
      await this.login(authData).then(() => {
        if (this.isAuthenticated) {
          this.$router.push("dashboard");
        } else {
          console.log("err");
        }
      });
    },