如何使用 Vuelidate 异步规则答案

【问题标题】：How to use a Vuelidate async rule如何使用 Vuelidate 异步规则
【发布时间】：2021-08-19 12:22:10
【问题描述】：

我正在尝试将自定义异步验证添加到 Vue 中的表单并遵循 documented example，但验证永远不会失败。这是我的代码：

<script>
import { reactive } from 'vue';
import useVuelidate from '@vuelidate/core';
import { required, email } from '@vuelidate/validators';

export default {
  template:
    '<input v-model="state.postcode" /><div v-if="v$.postcode.$silentErrors.length">never shows</div>',

  setup() {
    const state = reactive({
      postcode: 'OX14 8JW',
    });

    const rules = {
      postcode: {
        async startsWithX(value) {
          await new Promise((resolve) => setTimeout(resolve, 1000));
          const isOk = value && value[0] === 'X';
          //   console.log('sanity check: ', isOk);
          return Boolean(isOk);
        },
      },
    };

    const v$ = useVuelidate(rules, state);

    return { v$, state };
  },
};
</script>

有人可以帮我完成这个异步验证吗？

【问题讨论】：

标签： vue.js vuelidate

【解决方案1】：

您发布的示例链接尚未更新为最新更改（请注意侧边栏标题为“示例（过时）”）。

current docs for Async validators 状态：

返回 Promise 的异步验证器需要包装在 withAsync 帮助器中。这将告诉 Vuelidate 以一种特殊的方式对待验证器，跟踪挂起状态，存储响应等等：

//...
import { helpers } from '@vuelidate/validators'

const { withAsync } = helpers

export default {
  setup() {
    const state = reactive({
      postcode: 'OX14 8JW'
    })

    const rules = {
      postcode: {       ?
        startsWithX: withAsync(async (value) => {
          await new Promise((resolve) => setTimeout(resolve, 1000))
          const isOk = value && value[0] === 'X'
          return Boolean(isOk)
        })
      }
    }

    const v$ = useVuelidate(rules, state)

    return { v$, state }
  }
}

demo

【讨论】：