Vue.js中为动态对象添加Required必填校验并实现自定义错误提示

第一步：修正params的定义逻辑 #

你之前在computed中直接修改this.params的写法会触发死循环，应该把params定义为data中的响应式属性，通过watch监听平台字段的变化动态更新params内容：

data() {
  return {
    submitted: false,
    params: {}, // 把params放在data中声明为响应式数据
    // 原有其他数据如jsonS、tDetails等保留
  }
},
watch: {
  // 监听平台字段变化，动态更新params的字段
  'tDetails.platform'(newPlatform) {
    this.params = {}
    if (this.jsonS.hasOwnProperty(newPlatform)) {
      Object.entries(this.jsonS[newPlatform]).forEach(([key, value]) => {
        // Vue2环境需要用$set保证动态添加的属性是响应式的，Vue3可直接赋值
        this.$set(this.params, key, value)
      })
      // 更新params后重置校验，让Vuelidate加载新的校验规则
      this.$v.params.$reset()
    }
  }
}

第二步：动态生成params的校验规则 #

Vuelidate的validations配置支持函数返回值，你可以直接遍历当前params的所有键，动态生成必填校验规则：

import { required, minLength } from 'vuelidate/lib/validators' // 确保已导入需要的校验器

validations() {
  // 遍历params的键，动态生成每个字段的校验规则
  const paramsRules = {}
  Object.keys(this.params).forEach(key => {
    paramsRules[key] = { required }
    // 如果有其他自定义校验规则，可在这里根据key的类型按需添加
  })

  return {
    params: paramsRules, // 加上动态生成的params校验配置
    tDetails: {
      param1: { required, minLength: minLength(3) },
      param2: { required, minLength: minLength(3) },
      param3: { required, minLength: minLength(3) },
      param4: { required, minLength: minLength(2) },
      param5: { required, minLength: minLength(2) }
    }
  }
}

第三步：提交逻辑补充 #

表单提交时先触发全量校验，再控制错误提示显示：

methods: {
  submitForm() {
    this.$v.$touch() // 触发所有字段的校验
    this.submitted = true
    if (this.$v.$invalid) return // 校验不通过阻止提交
    // 校验通过后的提交逻辑
  }
}

你的模板代码无需修改，即可正常显示自定义的必填错误提示。

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