Vue.js使用Vuelidate时如何将多字段重复的校验规则整合为统一校验配置

基础复用实现 #

所有字段规则完全一致时，首先提取公共校验规则为独立常量，再通过对象展开语法复用即可：

• 在校验配置定义前，先声明公共规则（和原有代码的校验器引入逻辑保持一致即可）：

const commonRequiredTextRule = {
  required,
  minLength: minLength(3),
  maxLength: maxLength(50)
}

• 原有Validations配置直接复用该规则，无需重复编写：

}), Validations: {
    name: { ...commonRequiredTextRule },
    family: { ...commonRequiredTextRule },
    website: { ...commonRequiredTextRule },
    instagram_page: { ...commonRequiredTextRule },
    telegram_id: { ...commonRequiredTextRule }
}

批量生成优化（适合字段较多/后续需新增同规则字段的场景） #

如果后续会新增更多使用同一套规则的字段，可通过字段名数组批量生成校验配置，后续新增字段只需往数组中加字段名即可：

// 列出所有需要应用该公共规则的字段名
const commonRuleFields = ['name', 'family', 'website', 'instagram_page', 'telegram_id']

// 自动生成校验配置
const validationsConfig = commonRuleFields.reduce((acc, fieldName) => {
  acc[fieldName] = { ...commonRequiredTextRule }
  return acc
}, {})

// 直接绑定到组件的Validations配置上
}), Validations: validationsConfig

自定义规则叠加说明 #

如果某一个字段需要在公共规则基础上新增额外校验逻辑，只需在展开公共规则后追加自定义校验器即可，例如给website字段新增URL格式校验：

website: { ...commonRequiredTextRule, url }

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