Vue.js 实现输入框空值边框高亮及输入后恢复正常的方法

现有实现核心问题梳理：

• 校验逻辑方向反向：当前代码会在输入值匹配字符串'valid'时给输入框加上无效边框，和实际校验目标完全相反
• 存在重复v-model绑定冲突：同一input元素上同时写两个v-model会导致数据同步异常
• 零散的单字段状态管理无法支撑多字段联动校验需求

可按以下方案逐一解决提出的三个需求： #

空输入状态自动高亮对应边框 #

• 废弃硬编码匹配特定字符串的判断逻辑，直接基于输入框绑定的响应式值做空值判断：只要值经过trim处理后长度为0，即视为空状态
• 利用Vue响应式特性直接在类绑定中判断状态，无需手动操作DOM维护零散的validName类状态，可直接将原有类绑定调整为：

  :class="{ 'is-invalid': !form.fullname.trim().length }"
  

• 统一删除冲突的重复v-model绑定，配合现有vuelidate依赖的话，仅保留v-model.trim="$v.fullname.$model"即可。

多输入框联动空值高亮触发 #

• 建立统一的字段状态管理结构，替代零散的单字段布尔值：用一个对象存储所有需要校验的字段是否需要展示无效高亮，避免为每个字段单独编写validXxx状态变量
• 增加全局联动校验方法：当任意一个输入框触发输入事件时，遍历所有表单字段做检查，将trim后长度为0的字段标记为需要展示无效高亮
• 参考代码结构：

  data() {
    return {
      // 统一存储所有表单字段值
      form: {
        fullname: '',
        phone: ''
      },
      // 统一记录各字段的无效高亮状态
      invalidFieldMap: {}
    }
  },
  methods: {
    // 全表联动检查逻辑
    runGlobalCheck() {
      Object.keys(this.form).forEach(fieldKey => {
        const isEmpty = this.form[fieldKey].trim().length === 0
        this.$set(this.invalidFieldMap, fieldKey, isEmpty)
      })
    }
  }
  

• 模板中所有输入框的类绑定直接读取对应字段的状态，比如fullname输入框的类判断为:class="{ 'is-invalid': invalidFieldMap.fullname }"，只要任意字段触发输入，空字段就会自动加上高亮类。

有效内容输入后自动恢复正常样式 #

• 基于已有的统一状态管理，在单个输入框的输入事件中增加单字段状态更新逻辑：如果当前输入的字段内容trim后长度大于0，就立刻把该字段对应的无效高亮标记置为false，无需等待全表检查完成
• 补充方法逻辑：

  handleFieldInput(fieldKey) {
    // 当前字段有有效内容时，立刻取消自身的无效高亮
    if (this.form[fieldKey].trim().length > 0) {
      this.$set(this.invalidFieldMap, fieldKey, false)
    }
    // 同时触发全表联动检查，保证其他空字段的高亮状态正常
    this.runGlobalCheck()
  }
  

• 调整模板中每个输入框的input事件绑定，将原来的无参@input="validateStatus"替换为传入对应字段名的绑定形式，比如@input="handleFieldInput('fullname')"：当用户在原本高亮的空输入框中输入有效内容时，边框会立刻恢复为正常样式，同时其他未填写的空字段仍会保持联动高亮效果。

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