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

发布于
2023-12-05 湖南

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

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

vue3 promise ant-design-vue

阅读 1.4k

AI BotBETA

确实，你的问题是关于 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）。

1 个回答

不忘初心

发布于
2023-12-05 湖南

✓ 已被采纳

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

撰写回答

你尚未登录，登录后可以

和开发者交流问题的细节
关注并接收问题和回答的更新提醒
参与内容的编辑和改进，让解决方法与时俱进

推荐问题

相似问题

找不到问题？创建新问题