Vue.js多步骤表单：校验错误时如何为输入框添加error类

要实现这个需求，你需要调整错误状态的存储方式，配合Vue的类绑定功能动态添加error类，具体步骤如下：

1. 调整数据结构 #

把原有的errors拆分成两个部分，分别管理错误状态和提示文本：

• fieldErrors：对象，记录每个表单字段的错误状态（true/false）
• errorMessages：数组，存储错误提示文本

修改Vue实例的data部分：

data: {
  step: 1,
  totalsteps: 3,
  errorMessages: [], // 存储错误提示内容
  fieldErrors: { // 记录每个字段是否校验失败
    name: false,
    phone: false,
    email: false,
    message: false
  },
  form: {
    name: null,
    email: null,
    phone: null,
    message: null
  }
}

2. 更新校验逻辑 #

在nextStep方法中，每次校验前先清空错误状态和提示，再根据校验结果标记对应字段的错误状态，并添加提示文本：

nextStep:function(){
  // 清空之前的错误记录
  this.errorMessages = [];
  Object.keys(this.fieldErrors).forEach(key => {
    this.fieldErrors[key] = false;
  });

  let isValid = true;

  if(this.step == 1)
  {
    if(!this.form.name)
    {
      this.fieldErrors.name = true;
      this.errorMessages.push('请输入你的姓名');
      isValid = false;
    }
  }

  if(this.step == 2)
  {
    if(!this.form.phone)
    {
      this.fieldErrors.phone = true;
      this.errorMessages.push('请输入你的手机号');
      isValid = false;
    }
    if(!this.form.email)
    {
      this.fieldErrors.email = true;
      this.errorMessages.push('请输入你的邮箱');
      isValid = false;
    }
  }

  if(!isValid) return;

  this.step++;
}

3. 给输入框绑定动态类 #

用Vue的:class指令，根据fieldErrors里的状态判断是否添加error类：

<!-- Step1 姓名输入框 -->
<input v-model="form.name" type="text" name="name" placeholder="Type your name" :class="{ error: fieldErrors.name }">

<!-- Step2 手机号和邮箱输入框 -->
<input v-model="form.phone" type="tel" name="phone" placeholder="Type your phone number" :class="{ error: fieldErrors.phone }">
<input v-model="form.email" type="email" name="email" placeholder="Type your email" :class="{ error: fieldErrors.email }">

同时更新错误提示的渲染代码，适配数组类型的errorMessages：

<span v-for="(msg, index) in errorMessages" :key="index">{{ msg }}</span>

完整修改后的代码 #

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>My Website</title>
  <script src="https://cdn.jsdelivr.net/npm/vue@2.7.14"></script>
  </head>
  <body>
    <main>
      <form id="app">
        <span v-for="(msg, index) in errorMessages" :key="index">{{ msg }}</span>
        <section v-if="step == 1">
          <h3>Step 1</h3>
          <input v-model="form.name" type="text" name="name" placeholder="Type your name" :class="{ error: fieldErrors.name }">
        </section>

        <section v-if="step == 2">
          <h3>Step 2</h3>
            <input v-model="form.phone" type="tel" name="phone" placeholder="Type your phone number" :class="{ error: fieldErrors.phone }">
            <input v-model="form.email" type="email" name="email" placeholder="Type your email" :class="{ error: fieldErrors.email }">          
        </section>

        <section v-if="step == 3">
          <h3>Step 3</h3>
            <textarea v-model="form.message" placeholder="Type message"></textarea>          
        </section>
        <button v-if="step != 1" @click.prevent="prevStep" >Prev Step</button>
        <button v-if="step != totalsteps" @click.prevent="nextStep" >Next Step</button>

      </form>
    </main>

  <script>
    
    const App = new Vue({

      el:"#app",

        data: {

          step: 1,
          totalsteps: 3,
          errorMessages: [],
          fieldErrors: {
            name: false,
            phone: false,
            email: false,
            message: false
          },

          form: {
            name: null,
            email: null,
            phone: null,
            message: null
          }

        },

      methods: {

        nextStep:function(){
          // 清空之前的错误记录
          this.errorMessages = [];
          Object.keys(this.fieldErrors).forEach(key => {
            this.fieldErrors[key] = false;
          });

          let isValid = true;

          if(this.step == 1)
          {
            if(!this.form.name)
            {
              this.fieldErrors.name = true;
              this.errorMessages.push('请输入你的姓名');
              isValid = false;
            }
          }

          if(this.step == 2)
          {
            if(!this.form.phone)
            {
              this.fieldErrors.phone = true;
              this.errorMessages.push('请输入你的手机号');
              isValid = false;
            }
            if(!this.form.email)
            {
              this.fieldErrors.email = true;
              this.errorMessages.push('请输入你的邮箱');
              isValid = false;
            }
          }

          if(!isValid) return;

          this.step++;
        },

        prevStep:function(){
          // 返回上一步时清空错误记录，提升体验
          this.errorMessages = [];
          if(this.step === 2) {
            this.fieldErrors.name = false;
          } else if(this.step === 3) {
            this.fieldErrors.phone = false;
            this.fieldErrors.email = false;
          }
          this.step--;
        }

      }

    });

  </script>

  <style type="text/css">
    .error {
      background-color: red;
    }
  </style>
  
  </body>
</html>

关键说明 #

• 用fieldErrors对象单独管理每个字段的错误状态，实现输入框和错误状态的一一对应
• 通过:class="{ error: fieldErrors.xxx }"实现动态类绑定，Vue会自动根据布尔值决定是否添加类
• 改用数组存储错误提示，支持同时显示多个错误信息（比如Step2中手机号和邮箱都为空时，会显示两条提示）
• 在prevStep中清空错误状态，避免返回上一步后错误样式残留

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