Question

我在VeeValidate中对欧盟增值税号进行了自定义验证。它连接到我们的API，然后将其路由到VIES网络服务。但是，此Web服务非常不稳定，并且会发生很多错误，导致500响应。现在，当发生错误时，我返回false，但是我想知道是否有一种方法可以警告用户出现问题，而不是说值无效？

this

编辑：使用try-catch更改了代码。

Answer 1

您可以使用：

try {
  your logic
}
catch(error) {
  warn user if API brokes (and maybe inform them to try again)
}
finally {
 this is optional (you can for example turn of your loader here)
}

在您的情况下，try catch finally块将进入validate方法

Answer 2

好的，首先我不认为在表单验证错误消息中告知用户有关API损坏的想法是一个好主意：-| （我会使用小吃店之类的东西；））

任何方式，也许这可以帮到您

我想您正在扩展在创建的钩子中的表单验证，因此也许有条件地将消息传递给变量是可行的。试试这个：

 created() {
+  let errorOccured = false;
   Validator.extend('vat', {
-    getMessage: field => 'The ' + field + ' is invalid.',
+    getMessage: field => errorOccured ? `Trouble with API` : `The ${field} is invalid.`,
     validate: async (value) => {
       let countryCode = value.substr(0, 2)
       let number = value.substr(2, value.length - 2)
       const {status, data} = await axios.post('/api/euvat', {countryCode: countryCode, vatNumber: number})
+      errorOccured = status !== 200;
       return status === 200 ? data.success : false;
     },
   }, {immediate: false})
 }

Answer 3

经过大量搜索，我找到了执行此操作的最佳方法。您只需要返回一个具有以下值的对象而不是布尔值即可：

{
  valid: false,
  data: { message: 'Some error occured.' }
}

它将覆盖默认消息。如果要使用默认消息返回对象，则只需将数据值设置为undefined。

Answer 4

这是veeValidate v3版本：

Note: these syntaxes do not work::

    `introduction.html#todo-1`_

    :ref:`introduction.html#todo-1`

    :ref:`todo-1`

这假设您的API端点返回的是json：import { extend } from 'vee-validate'; extend('vat', async function(value) { const {status, data} = await axios.post('/api/validate-vat', {vat: value}) if (status === 200 && data.valid) { return true; } return 'The {_field_} field must be a valid vat number'; });或{ valid: true }

Vue VeeValidate-如何处理异常是自定义验证

4 个答案: