在 laravel 5.4 + vueJS 中处理表单验证错误

Posted 2023-02-22

【中文标题】在 laravel 5.4 + vueJS 中处理表单验证错误

【英文标题】：handling form validation error in laravel 5.4 + vueJS

【发布时间】：2017-11-06 21:48:57

【问题描述】：

我有这样的 create.vue 表单：

    <template>
    <div>
        <div v-if="message" class="alert alert-success">
             message 
        </div>

        <form @submit.prevent="store" action="/user" method="post">
            <div :class="['form-group', errors.name ? 'has-error' : '']">
            <!--<div class="form-group">-->
            <label>Full name</label>
                <input v-model="state.name" type="text" class="form-control">
                <span v-if="errors.name" class="label label-danger"> errors.name[0] </span>
                <!--<span class="label label-danger"> errors(errors.name) </span>-->
            </div>

            <div :class="['form-group', errors.email ? 'has-error' : '']">
            <!--<div class="form-group">-->
                <label>Email</label>
                <input v-model="state.email" type="email" class="form-control">
                <span v-if="errors.email" class="label label-danger"> errors.email[0] </span>
                <!--<span class="label label-danger"> errors(errors.email) </span>-->
            </div>

            <div class="form-group">
                <button class="btn btn-primary">Submit</button>
                <!--<router-link :to=" name: 'userIndex' ">Back to index</router-link>-->
            </div>
        </form>
    </div>
</template>

<script>
export default 
    data() 
        return 
            errors: [],
            user: [],
            state: 
                name: '',
                email: ''
            
        
    ,

    methods: 
        store(e) 
            axios.post(e.target.action, this.state).then(response => 
                this.errors = [];

                this.state = 
                    name: '',
                    email: ''
                

                this.message = 'User has been created.';
            ).catch(error => 
                if (! _.isEmpty(error.response)) 
                    if (error.response.status = 422) 
                        this.errors = error.response.data;
                    
                
            );
        
    

</script>

还有我的控制器： 用户控制器.php

public function store(Request $request)
     
         $this->validate($request, [
             'name'  => 'required|string|max:50',
             'email' => 'required|email|unique:users,email',
         ]);

         $user = User::create([
             'name'     => $request->name,
             'email'    => $request->email,
             'password' => bcrypt(str_random()),
         ]);

         return response()->json($user);
     

当我键入类似于曾经存在的内容（唯一）时，我在控制台响应中收到错误文本，但不像往常那样以形式显示。我在控制台中遇到这样的错误：

"email":["The email has already been taken."]

如何在表单中显示？ 我的脚本有什么问题？

有什么帮助吗？之前谢谢你..

【问题讨论】：

@Demonowh，你是什么意思？ vue标签模板下JS中的脚本错误

【参考方案1】：

您好，我尝试在本地复制您的脚本。虽然在我身上工作。你能尝试调试 catch 中的对象错误吗？发送样本结果:)

if (error.response.status = 422) 
    this.errors = error.response.data;
    console.log(this.errors);                             

【讨论】：

我收到回复 email: ["The email has already been taken."] 和状态 422 Unprocessable Entity

嗨，请看这个小提琴。 jsfiddle.net/khenxi/ev8wvg8p 如果this.errors 确实包含正确的输出，那么它应该显示