antd表单验证this.form.validateFields不能处理错误情况。

Question

问题描述

在vue框架内使用ant-design组件,页面内有一个表单，设定的表单规则比较简单，就是必填。但是即使什么都不输入，直接提交也可以输入内容也可以新增或修改成功。也就是表单的校验规则没有生效。

问题出现的环境背景及自己尝试过哪些方法

我猜测this.form.validateFields会自动处理错误情况，然后这项任务可能是比较底层的依赖去做的，ant-design文档页提到了async-validator，于是手动安装了async-validator，但是没有一点帮助。

相关代码

// 只列举一个表单项，其他的规则都是必填。

<a-form :form="form" @submit="handleSubmit" layout="vertical">
  <a-form-item
    label="标题"
    :labelCol="formItemLayout.labelCol"
    :wrapperCol="formItemLayout.wrapperCol">
      <a-input
        v-decorator="[
          'title',
          {initialValue: formData.title, rules: [{ required: true, message: '请输入标题' }]}
        ]"
        placeholder="标题" />
  </a-form-item>
</a-form>

// 提交

async handleSubmit (e) {
  event.preventDefault()
  this.form.validateFields((err, values) => {
    if (!err) {
      Object.assign(this.formData, values)
      Object.assign(this.formData, { updatedAt: Date.now() })
      console.log('提交信息成功', this.formData)
    }
  })
  if (this.formData.id) {
    const res = await updateBanner(this.formData)
    console.log('编辑', res)
  } else {
    const res = await createBanner(this.formData)
    console.log('新增', res)
  }
},

你期待的结果是什么？实际看到的错误信息又是什么？

我期待的结果是，当表单不满足规则时，无法提交表单（流程中止），并且有相对应的文字提示（显示反馈）。
目前，交互上的表现是错误表单项出现红色小字的提示，前端浏览器控制台中出现async-validator的警告，类似于"title is required"。但是表单还是可以正常提交至数据库的。也就是说this.form.validateFields并没有阻止提交错误表单的流程。

Answer 1

没有阻止表单的默认行为 event.preventDefault()改为 e.preventDefault()

Answer 2

目前的解决方案是：
1.删除<a-form>标签中的 @submit="handleSubmit"。
2.将表单按钮中的@click="handleSubmit()"改为@click="handleSubmit"。（之前没有把这一块的代码贴在问题中）
3.将event.preventDefault()修改为e.preventDefault()。（感谢@Kingsley的答案）
这样提交不符合规则的表单时，界面有错误提示，以及表单不会真的提交到后台。