如何使用Vuelidate异步规则？解决Vue自定义表单异步验证不生效问题

我来帮你排查这个问题，你的代码里有几个关键细节需要调整，才能让异步验证正常工作：

1. 开启自动触发验证的配置 #

Vuelidate默认不会自动执行异步验证，除非你开启$autoDirty选项——它会在字段值变化时自动触发验证逻辑。你之前的代码里缺少这个配置，导致异步验证根本没被执行。

修改useVuelidate的调用：

const v$ = useVuelidate(rules, state, { $autoDirty: true });

2. 调整模板的错误判断逻辑 #

你用的$silentErrors是用于获取未触碰字段的错误，但开启$autoDirty后，直接使用$errors会更直观，能准确反映验证后的错误状态。修改模板部分：

<template>
  <input v-model="state.postcode" />
  <div v-if="v$.postcode.$errors.length">邮编必须以X开头！</div>
</template>

3. （可选）优化异步验证器的返回逻辑 #

虽然你的验证器返回布尔值是可行的，但如果想自定义错误提示，可以在验证失败时返回错误对象，方便后续在模板里精准判断：

async startsWithX(value) {
  await new Promise((resolve) => setTimeout(resolve, 1000));
  const isOk = value && value[0] === 'X';
  // 验证通过返回true，失败返回自定义错误标识
  return isOk ? true : { startsWithX: '邮编必须以X开头' };
}

对应的模板可以这样显示自定义提示：

<div v-if="v$.postcode.$errors[0]?.startsWithX">
  {{ v$.postcode.$errors[0].startsWithX }}
</div>

完整修改后的代码 #

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

export default {
  template: `
    <input v-model="state.postcode" />
    <div v-if="v$.postcode.$errors.length">邮编必须以X开头！</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';
          return isOk;
        },
      },
    };
    // 开启自动触发验证
    const v$ = useVuelidate(rules, state, { $autoDirty: true });

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

额外选项：手动触发验证 #

如果你不想开启$autoDirty（避免每次输入都发起异步请求），也可以通过输入框的blur事件手动触发验证：

<input v-model="state.postcode" @blur="v$.postcode.$touch()" />

这样只有当用户离开输入框时，才会执行异步验证。

内容的提问来源于stack exchange，提问作者Jannie Theunissen