Vue.js+Buefy步骤表单必填项验证：禁用下一步至完成必填项

问题分析 #

你的代码存在几个关键问题导致验证失效：

1. 变量绑定不一致：b-input 的 v-model 绑定的是 NombreCampo，但 data 中定义的变量是 nameField，导致输入值无法正确同步，验证永远判定为空。
2. 验证时机错误：监听 activeStep 是在步骤切换后才执行验证，此时已经完成跳转，无法阻止操作。
3. 错误提示未关联到字段：原错误提示是一个独立的消息框，没有和输入字段关联显示在下方。

修正后的完整代码 #

<template>
  <section>
    <b-steps v-model="activeStep" :has-navigation="false">
      <!-- 第一步：账户信息 -->
      <b-step-item step="1" label="Account" :clickable="false">
        <h1 class="title has-text-centered">Account</h1>
        <b-input
          v-model="nameField"
          placeholder="Enter field name"
          :invalid="!!step1Error"
          validation-message="Name is required"
        ></b-input>
        <!-- 手动错误提示（可选，替代validation-message） -->
        <!-- <p class="help is-danger mt-2" v-if="!!step1Error">{{ step1Error }}</p> -->
      </b-step-item>

      <!-- 第二步：个人信息 -->
      <b-step-item step="2" label="Profile" :clickable="false">
        <h1 class="title has-text-centered">Profile</h1>
      </b-step-item>

      <!-- 导航按钮 -->
      <template #navigation="{ previous, next }">
        <b-button
          :disabled="previous.disabled"
          @click.prevent="previous.action"
        >
          Previous
        </b-button>
        <b-button 
          :disabled="activeStep === 0 && !nameField.trim()" 
          @click.prevent="handleNext(next)"
        >
          Next
        </b-button>
      </template>
    </b-steps>
  </section>
</template>

<script>
export default {
  data() {
    return {
      activeStep: 0,
      nameField: '',
      step1Error: ''
    }
  },
  methods: {
    handleNext(next) {
      // 第一步验证逻辑
      if (this.activeStep === 0) {
        if (!this.nameField.trim()) {
          this.step1Error = 'Name is required';
          return; // 验证失败，阻止步骤切换
        }
        this.step1Error = '';
      }
      next.action(); // 验证通过，执行下一步
    }
  }
}
</script>

关键修改说明 #

1. 修正变量绑定
   将 b-input 的 v-model 改为 nameField，确保输入值和数据模型同步，解决验证永远为空的问题。

2. 前置验证阻止跳转
   自定义 handleNext 方法，在点击下一步时先执行当前步骤的验证：

   • 若第一步的 nameField 为空，设置错误信息并返回，不执行步骤切换
   • 验证通过后再调用 next.action() 完成步骤跳转

3. 字段下方显示错误

   • 利用 Buefy b-input 的内置属性：通过 :invalid="!!step1Error" 标记输入框为无效状态，validation-message 会自动在字段下方显示错误提示
   • 也可以手动添加 <p class="help is-danger"> 元素，更灵活地控制错误样式和位置

4. UI层面禁用按钮
   下一步按钮的 disabled 属性绑定 activeStep === 0 && !nameField.trim()，在第一步且输入为空时直接禁用按钮，从根源避免无效操作。

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