Vue3 Composition API中Vuelidate正则验证始终返回true的问题

核心问题：helpers.regex用法错误 #

你调用helpers.regex时直接传入了正则表达式，但Vuelidate的helpers.regex要求第一个参数是验证器的标识名称，第二个参数才是正则表达式。错误的参数顺序导致验证器逻辑失效，始终返回true。

修复步骤 #

1. 修正helpers.regex的调用方式 #

将正则验证器的定义改为：

const regular = helpers.regex('complexUsername', /^.*(?=.*[a-zA-Z])(?=.*\d)(?=.*[!#$%&? "]).*$/);

第一个参数是自定义的验证器名称（可任意命名），第二个参数是你的正则表达式。

2. 处理空值验证逻辑（可选） #

Vuelidate默认会跳过空值的验证，如果你希望空值时正则验证也返回false，可以用helpers.withParams包装自定义验证逻辑：

const regular = helpers.withParams(
  { type: 'regex', regex: /^.*(?=.*[a-zA-Z])(?=.*\d)(?=.*[!#$%&? "]).*$/ },
  (value: string) => {
    if (!value) return false; // 空值时返回false
    return /^.*(?=.*[a-zA-Z])(?=.*\d)(?=.*[!#$%&? "]).*$/.test(value);
  }
);

3. 完整修正后的代码 #

<template>
  <div class="form-wrapper">
    <h1 class="form-title">Зарегистрируйтесь</h1>
    <form action="" class="form">
      <div class="form-item">
        <input
          type="text"
          class="form-item-input"
          placeholder="Введите отображаемый логин на сайте"
          v-model="userName"
          @click="console.log(v$.userName.regular.$response)"
          @blur="v$.userName.$touch"
          :class="{
            alert: v$.userName.$dirty && !v$.userName.$valid
          }"
        >
        <!-- 添加错误提示 -->
        <div v-if="v$.userName.$dirty && v$.userName.required.$error">
          用户名不能为空
        </div>
        <div v-if="v$.userName.$dirty && v$.userName.regular.$error">
          用户名必须包含字母、数字和特殊字符(!#$%&? 空格)
        </div>
      </div>
      <button class="form-item-submit" type="submit" @click.prevent="handleSubmit">Войти</button>
    </form>
  </div>
</template>

<script lang="ts">
import { useVuelidate } from '@vuelidate/core';
import { required, helpers } from '@vuelidate/validators';

// 修正helpers.regex的调用方式
const regular = helpers.regex('complexUsername', /^.*(?=.*[a-zA-Z])(?=.*\d)(?=.*[!#$%&? "]).*$/);

export default {
  setup() {
    return {
      v$: useVuelidate()
    };
  },
  data() {
    return {
      userName: '',
    };
  },
  validations() {
    return {
      userName: { required, regular }
    };
  },
  methods: {
    handleSubmit() {
      this.v$.userName.$touch();
      if (this.v$.userName.$valid) {
        // 表单验证通过，执行提交逻辑
        console.log('提交成功');
      }
    }
  }
};
</script>

<style scoped>
.alert {
  border-color: red;
}
</style>

额外说明 #

• 提交表单时建议手动触发表单验证（$touch()），并检查$valid状态后再执行提交逻辑。
• 添加明确的错误提示，能直接告知用户不符合规则的原因，提升体验。

内容的提问来源于stack exchange，提问作者Региональный центр Орион