Vue.js单页应用注册页验证错误无法显示的问题排查

看起来你已经拿到了后端返回的错误信息，但页面就是不显示，我帮你排查出几个关键问题，一步步解决：

1. 修复模板的插值语法错误 #

你现在模板里用的是单大括号{errors.email}，但Vue的文本插值必须用双大括号{{ }}。另外，后端返回的验证错误（比如Laravel这类框架）通常每个字段对应的是一个错误信息数组，所以得取数组的第一个元素才能显示正确内容。

另外，Bootstrap的invalid-feedback类默认是隐藏的，需要给对应的input加上is-invalid类才会显示，所以我们给input加个动态class绑定：

修改后的邮箱输入框部分：

<div class="form-group"> 
  <input 
    v-model="form.email" 
    type="email" 
    name="email" 
    :class="['form-control form-control-lg', { 'is-invalid': errors.email }]"
    placeholder="E-Mail address"
  > 
  <span v-if="errors.email" class="invalid-feedback" role="alert"> 
    {{ errors.email[0] }} 
  </span> 
</div>

2. 修正data里form对象的写法错误 #

你在data里定义form的时候多了一对括号：form: ({ ... })，这是语法错误（相当于试图调用一个对象字面量），应该直接写成普通对象：

修改后的脚本data部分：

data: () => ({ 
  errors: {}, // 把初始值从数组改成对象，更匹配后端返回的错误结构
  form: { 
    name: '', 
    email: '', 
    password: '', 
    password_confirmation: '' 
  }, 
  mustVerifyEmail: false 
}),

把errors的初始值从[]改成{}，这样初始状态下errors.email是undefined，v-if="errors.email"能正确判断是否显示错误提示。

3. 确认错误对象的结构 #

你可以在控制台再仔细看一下this.errors的结构，比如如果后端返回的是这样的格式：

{
  "email": ["该邮箱已被注册"]
}

那errors.email[0]就能拿到正确的错误信息。如果你的后端返回的是单个字符串（比如"email": "邮箱格式错误"），那直接用{{ errors.email }}就行。

最后，把修改后的完整脚本贴出来参考：

export default { 
  middleware: 'guest', 
  data: () => ({ 
    errors: {}, 
    form: { 
      name: '', 
      email: '', 
      password: '', 
      password_confirmation: '' 
    }, 
    mustVerifyEmail: false 
  }), 
  methods: { 
    async register() { 
      this.errors = {} // 重置为对象
      try { 
        await axios.get('/sanctum/csrf-cookie') 
        let response = await axios.post('/api/register', this.form) 
        console.log(response) 
      } catch (error) { 
        this.errors = error.response.data.errors 
        console.log(this.errors.email) 
      } 
    } 
  } 
}

这样修改后，页面应该就能正常显示验证错误啦！

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