Vuelidate如何根据复选框状态设置字段可选性并支持自定义校验

核心逻辑是利用Vuelidate支持动态生成校验规则的特性，仅在复选框勾选时返回目标字段的校验配置，未勾选时返回空规则对象即可完全忽略该字段的校验，不会影响表单整体的$invalid状态。

Vue 3 + Vuelidate 2 实现步骤 #

1. 引入依赖并定义基础响应式状态 #

import { ref, computed } from 'vue'
import { useVuelidate } from '@vuelidate/core'
import { required, minLength, maxLength, sameAs } from '@vuelidate/validators'

// 复选框绑定值
const isUniversal = ref(false)
// 需要动态校验的输入框绑定值
const yField = ref('')
// sameAs规则的对比字段示例，可替换为实际业务字段
const compareField = ref('')

2. 配置动态校验规则 #

将校验规则定义为计算属性，根据复选框状态动态返回对应规则：

const rules = computed(() => ({
  yField: isUniversal.value ? {
    required,
    minLength: minLength(6),
    maxLength: maxLength(20),
    sameAs: sameAs(compareField),
    // 自定义校验规则示例
    customValidate: (value) => {
      return /^[a-zA-Z0-9_]+$/.test(value) || '仅支持字母、数字和下划线'
    }
  } : {}
}))

// 初始化Vuelidate实例
const v$ = useVuelidate(rules, { yField, compareField, isUniversal })

3. 模板层适配 #

输入框的必填标识、错误提示跟随复选框状态动态展示即可：

<template>
  <!-- 复选框 -->
  <input type="checkbox" v-model="isUniversal" id="universalToggle">
  <label for="universalToggle">is universal</label>

  <!-- 动态校验输入框 -->
  <input 
    type="text" 
    v-model="yField" 
    :required="isUniversal"
    @input="v$.yField.$touch()"
  >

  <!-- 仅勾选时展示错误提示 -->
  <div v-if="isUniversal && v$.yField.$error">
    <p v-if="v$.yField.required.$error">该字段为必填项</p>
    <p v-if="v$.yField.minLength.$error">长度不能少于6位</p>
    <p v-if="v$.yField.sameAs.$error">与对比字段值不一致</p>
    <p v-if="v$.yField.customValidate.$error">{{ v$.yField.customValidate.$message }}</p>
  </div>

  <!-- 提交按钮直接用全局$invalid控制即可，未勾选时y字段不会影响该值 -->
  <button :disabled="v$.$invalid" @click="submit">提交表单</button>
</template>

Vue 2 + Vuelidate 0.x 兼容写法 #

如果你使用的是适配Vue2的旧版本Vuelidate，逻辑保持一致，只需将规则放在validations配置的函数返回值中：

import { required, minLength, sameAs } from 'vuelidate/lib/validators'

export default {
  data() {
    return {
      isUniversal: false,
      yField: '',
      compareField: ''
    }
  },
  validations() {
    return {
      yField: this.isUniversal ? {
        required,
        minLength: minLength(6),
        sameAs: sameAs('compareField')
      } : {}
    }
  }
}

内容的提问来源于stack exchange，提问作者Swapnil Soni