laravel - 如何在 vuejs / Laravel 中验证动态输入

Question

我通过拦截器和 Toast for UI 来捕捉错误。通常错误被拦截器捕获并通过toast显示以进行一次性输入，我试图捕获不确定数量的输入的错误。到目前为止，循环输入数组和设置规则不起作用。 Component.vue

<template>
    <div>
        <div class="form-group" v-for="(input,k) in inputs" :key="k">
            <input type="text" id="name" placeholder="Name" v-model="input.name" />
            <span>
                <i class="fas fa-minus" @click="remove(k)" v-show="k || ( !k && inputs.length > 1)"></i>
                <i class="fas fa-plus" @click="add(k)" v-show="k == inputs.length-1"></i>
            </span>
        </div>
        <button @click="addName">Create</button>
    </div>
</template>

<script>
    export default {
    data() {
        return {
            inputs: [{name: ''}]
            }
        },
        methods: {
            add(index) {
                this.inputs.push({ name: ''});
                console.log( this.inputs);
            },
            remove(index) {
                this.inputs.splice(index, 1);
            },
            addName() {
                axios.post('/user', {userinputs:this.inputs}).then(response => {})
                    .catch(error => {
                        console.log(error);
                    });
            }
        }
    }
</script>

Controller：

public function store(Request $request)
{
    $rules = [
        'userinputs' => 'required|max:255',
    ];
    foreach ($request->input('userinputs') as $key => $my_object_in_array) {
        $rules[$my_object_in_array['name']] = 'required|max:10';
    }
    return $rules;
}

标签： laravelvue.jsvuejs2

Answer 1

我希望这是您想要实现的目标。

public function store(Request $request)
{

    $rules = [
        'userinputs.*.name' => 'required|max:255',
    ];

    $validator = \Illuminate\Support\Facades\Validator::make($request->all(), $rules);

    if ($validator->fails()) {
        //Return the errors as JSON
        return response()->json(['success' => 'false', 'errors' => $validator->errors()], 400);
    }

    //Do something

    return ['success' => 'true'];
}