Quasar中使用切换按钮实现表单验证的问题

先修正原代码的核心错误 #

• 移除第一个q-btn-toggle上的type="submit"，避免点击选项就触发表单提交
• 修正Dialog的判断逻辑：q-btn-toggle的v-model值是'one'（对应yes）或'two'（对应no），不是布尔值，不能用true/false判断

方法一：用Quasar内置表单验证（推荐） #

Quasar的q-form原生支持验证规则，能自动显示错误提示，步骤如下：

修改后的完整代码 #

<template>
  <div padding>
    <q-form ref="checkForm" @submit="onSubmit" class="q-gutter-md">
      <div class="q-pa-md row items-start q-gutter-md">
        <q-card class="link-card">
          <q-card-section class="card-title">健康自查:</q-card-section>
          
          <q-card-section>
            <p>1. 你现在感觉还好吗?</p>
            <q-btn-toggle 
              v-model="question_1" 
              class="my-custom-toggle" 
              no-caps 
              rounded 
              unelevated
              toggle-color="primary" 
              color="white" 
              text-color="primary" 
              :options="[
                { label: '是', value: 'yes' },
                { label: '否', value: 'no' },
              ]"
              required
              :rules="[val => val !== undefined || '请选择该问题的答案']"
            ></q-btn-toggle>
          </q-card-section>

          <q-separator inset></q-separator>

          <q-card-section>
            <p>2. 你昨晚睡眠充足吗?</p>
            <q-btn-toggle 
              v-model="question_2" 
              class="my-custom-toggle" 
              no-caps 
              rounded 
              unelevated
              toggle-color="primary" 
              color="white" 
              text-color="primary" 
              :options="[
                { label: '是', value: 'yes' },
                { label: '否', value: 'no' },
              ]"
              required
              :rules="[val => val !== undefined || '请选择该问题的答案']"
            ></q-btn-toggle>
          </q-card-section>

          <q-card-section>
            <q-btn 
              label="提交答案" 
              class="full-width" 
              color="primary" 
              type="submit"
            ></q-btn>
          </q-card-section>

          <!-- 用v-model控制弹窗显示，更符合响应式逻辑 -->
          <q-dialog v-model="showOkDialog">
            <q-card class="my-card">
              <q-card-section class="bg-secondary text-white">
                <q-avatar size="lg" class="align-center" icon="check_circle" color="primary" text-color="white"></q-avatar>
                <div class="text-h6">状态良好</div>
              </q-card-section>
              <q-card-actions align="around">
                <q-btn flat @click="$router.push('/termin')">继续</q-btn>
                <q-btn flat @click="showOkDialog = false">取消</q-btn>
              </q-card-actions>
            </q-card>
          </q-dialog>

          <q-dialog v-model="showNotOkDialog">
            <q-card class="my-card">
              <q-card-section class="bg-secondary text-white">
                <q-avatar size="lg" class="align-center" icon="error_outline" color="primary" text-color="white"></q-avatar>
                <div class="text-h6">需要关注状态</div>
              </q-card-section>
              <q-card-actions align="around">
                <q-btn flat @click="$router.push('/termin')">继续</q-btn>
                <q-btn flat @click="showNotOkDialog = false">取消</q-btn>
              </q-card-actions>
            </q-card>
          </q-dialog>
        </q-card>
      </div>
    </q-form>
  </div>
</template>

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

const question_1 = ref(undefined)
const question_2 = ref(undefined)
const checkForm = ref(null)
const showOkDialog = ref(false)
const showNotOkDialog = ref(false)

const onSubmit = async () => {
  // 触发表单验证，验证不通过会自动显示错误提示
  const isValid = await checkForm.value.validate()
  if (!isValid) return

  // 验证通过后判断结果
  const bothYes = question_1.value === 'yes' && question_2.value === 'yes'
  const bothNo = question_1.value === 'no' && question_2.value === 'no'
  
  if (bothYes) {
    showOkDialog.value = true
  } else if (bothNo) {
    showNotOkDialog.value = true
  }
}
</script>

关键说明 #

• 给每个q-btn-toggle添加required和自定义验证规则，确保用户必须选择选项
• 通过q-form的ref调用validate()方法，该方法返回Promise，验证失败时自动显示错误文字
• 用v-model控制弹窗显示，替代原有的v-if，逻辑更清晰

方法二：手动验证（极简版） #

如果不需要Quasar的样式提示，直接在提交方法里判断变量是否有值即可：

修改后的核心代码 #

<template>
  <!-- 模板去掉rules属性，其他保持修正后的结构 -->
  <q-form @submit="onSubmit" class="q-gutter-md">
    <!-- ... 其他内容不变 ... -->
  </q-form>
</template>

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

const question_1 = ref(undefined)
const question_2 = ref(undefined)
const showOkDialog = ref(false)
const showNotOkDialog = ref(false)

const onSubmit = () => {
  // 手动检查是否都已选择
  if (!question_1.value) {
    alert('请回答第一个问题')
    return
  }
  if (!question_2.value) {
    alert('请回答第二个问题')
    return
  }

  // 后续判断逻辑同方法一
  const bothYes = question_1.value === 'yes' && question_2.value === 'yes'
  const bothNo = question_1.value === 'no' && question_2.value === 'no'
  
  if (bothYes) {
    showOkDialog.value = true
  } else if (bothNo) {
    showNotOkDialog.value = true
  }
}
</script>

关键说明 #

• 直接判断question_1和question_2是否有赋值，无值则用alert提示
• 实现最简单，但没有内置验证的样式提示，适合追求极简的场景

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