问题描述

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

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

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

相关代码

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

label="标题"

:labelCol="formItemLayout.labelCol"

:wrapperCol="formItemLayout.wrapperCol">

v-decorator="[

'title',

{initialValue: formData.title, rules: [{ required: true, message: '请输入标题' }]}

]"

placeholder="标题" />

// 提交

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并没有阻止提交错误表单的流程。