Vue3 Quasar项目中监听输入验证事件同步自定义标签样式

完全可以实现，无需修改原有验证规则，直接利用Quasar q-input 组件的内置验证状态就能同步自定义标签的样式，以下是两种简洁的实现方式：

方法一：使用计算属性实时获取验证状态 #

通过ref获取输入框实例，用计算属性监听其invalid状态（Quasar会自动在验证失败时将该属性设为true），再将状态绑定到标签的class上：

<template>
  <div class="q-pa-md">
    <div 
      id="myCustomLabel"
      :class="{ 'text-red-500': isInputInvalid }"
    >{{ props.label }}</div>
    <q-input
      ref="myInput"
      filled
      v-model="name"
      :rules="props.rules"
    />
  </div>
</template>

<script setup>
import { ref, computed } from 'vue'

const props = defineProps({
  label: String,
  rules: Array
})

const name = ref('')
const myInput = ref(null)

// 实时计算输入框的验证状态
const isInputInvalid = computed(() => {
  return myInput.value?.invalid === true
})
</script>

方法二：使用watch监听状态变化 #

如果需要在状态变化时执行额外逻辑，可以用watch监听输入框的invalid属性：

<template>
  <div class="q-pa-md">
    <div 
      id="myCustomLabel"
      :class="{ 'text-red-500': isInputInvalid }"
    >{{ props.label }}</div>
    <q-input
      ref="myInput"
      filled
      v-model="name"
      :rules="props.rules"
    />
  </div>
</template>

<script setup>
import { ref, watch } from 'vue'

const props = defineProps({
  label: String,
  rules: Array
})

const name = ref('')
const myInput = ref(null)
const isInputInvalid = ref(false)

// 监听输入框验证状态变化，初始化时立即检查
watch(
  () => myInput.value?.invalid,
  (newStatus) => {
    isInputInvalid.value = newStatus === true
    // 这里可以添加状态变化时的额外逻辑
  },
  { immediate: true }
)
</script>

自定义样式（可选） #

如果不想用Quasar自带的text-red-500类，可以自定义样式：

<style scoped>
.invalid-label {
  color: #f5222d; /* 自定义红色值 */
}
</style>

然后将模板中的class改为:class="{ 'invalid-label': isInputInvalid }"即可。

这种方案的优势在于完全复用Quasar的验证逻辑，不需要手动调用规则验证，能自动同步所有验证触发场景（输入、失焦、表单提交等）下的状态。

内容的提问来源于stack exchange，提问作者Otorrinolaringologista -man