如何使用Vuelidate异步规则

Question

我正在尝试向Vue中的表单添加一个自定义异步验证，并遵循有记录的例子，但是验证从未失败。这是我的代码：

<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>

有人能帮我让这个异步验证工作吗？

Answer 1

您发布的示例链接尚未更新到最新的更改(注意侧边栏标题是“示例(过时)”)。

当前文档状态：

返回承诺的异步验证器需要包装在withAsync助手中。这将告诉pending以特殊的方式对待验证器，跟踪待定状态，存储响应等等：

//...
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 }
  }
}

演示