vue3 Ant Design Vue 表单提交校验报错？

Question

vue3 Ant Design Vue 表单提交校验报错

是因为新版的Antd使用了React的hooks，表单中的字段校验方法进行了一些修改，原来的回调方法改成了返回一个Promise对象吗？

Answer 1

const checkPlanRules = (rule, value, callback) => {    if (clock && !sendPlanTime) {    return Promise.reject("请选择定时的时间");    } else {    return Promise.resolve();    }};

Answer 2

确实，你的问题是关于 Vue 3 和 Ant Design Vue 的表单提交校验报错。这个问题可能是由于在新版本的 Ant Design Vue 中，表单的字段校验方法已经进行了一些修改。

在 Ant Design Vue 的早期版本中，我们可以通过在表单的 rules 属性中传递一个函数，并在函数中返回校验结果来定义校验规则。然而，在新版本的 Ant Design Vue 中，由于使用了 React 的 Hooks，校验函数的返回值需要是一个 Promise 对象。

所以，如果你在使用 Vue 3 和 Ant Design Vue 的新版本时遇到了这个问题，你可能需要检查你的校验规则函数，确保它们返回了一个 Promise 对象。

例如，你可能需要将你的代码从这样：

const rules = {  username: [    { required: true, message: '请输入用户名', trigger: 'blur' },    { validator: (rule, value, callback) => {        if (!value) {          callback(new Error('用户名不能为空'));        } else {          callback();        }      }, trigger: 'blur' },  ],};

修改为这样：

const rules = {  username: [    { required: true, message: '请输入用户名', trigger: 'blur' },    { validator: (rule, value) => new Promise((resolve, reject) => {        if (!value) {          reject(new Error('用户名不能为空'));        } else {          resolve();        }      }), trigger: 'blur' },  ],};

这样就可以解决你的问题。记住，每个校验规则都需要返回一个 Promise 对象，无论是解决（resolve）还是拒绝（reject）。