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

Question

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

Validator.extend('vat', {
  getMessage: field => 'The ' + field + ' is invalid.',
  validate: async (value) => {
    let countryCode = value.substr(0, 2)
    let number = value.substr(2, value.length - 2)
    try {
        const {status, data} = await axios.post('/api/euvat', {countryCode: countryCode, vatNumber: number})
        return status === 200 ? data.success : false
    } catch (e) {
        return false
    }
  },
}, {immediate: false})

编辑：使用 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 挂钩中扩展表单验证，因此有条件地向变量获取消息可能会起作用。试试这个：

 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

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

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

它将覆盖默认消息。如果你想 return 一个带有默认消息的对象，你可以将数据值设置为 undefined.

Answer 4

这是一个 veeValidate v3 版本：

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';
});

这假设您的 API 端点正在返回 json：{ valid: true } 或 { valid: false }

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

Vue VeeValidate - How to handle exception is custom validation

vuejs2

vee-validate