laravel - Laravel，Vue Js 与 Vuetify 和 Vuelidate

问题描述

我想问一下Laravel和Vue JS 中的验证。

在这里，我将Vue JS与Laravel分开使用。然后我很困惑使用后端和前端的验证，或者比其中一个更好。

在Vue JS的这种情况下，我使用Vuetify、Vuelidate和Vuex。

我已经尝试使用Vuelidate对Vuetify进行验证，这非常简单。

但是我很困惑选择，我是否足以仅在 Vue中进行验证？或者仍然检索仅从Backend发送的所有错误响应。

如果我只在前端使用验证，让我感到困惑的并不是我能做的一切。例如验证图像类型、图像大小、唯一数据等。

我害怕的只是在Frontend上进行验证。我必须重建，我认为这非常低效。

这是我在Vue JS中验证的一个示例。

<template>
    <v-container
        fluid
        tag="section"
    >
    <v-row
        align="center"
        justify="center"
    >
        <v-col
            cols="12"
        >
            <form>
                <v-text-field
                    class="mb-5"
                    v-model="form.title"
                    :error-messages="errors.title"
                    :counter="10"
                    label="Title"
                    required
                    dense
                    @input="$v.form.title.$touch()"
                    @blur="$v.form.title.$touch()"
                ></v-text-field>
                <quill-editor
                    class="mb-5"
                    v-model="form.content"
                    :options="editorOption"
                ></quill-editor>
                <p class="display-6" v-if="errors.content">{{ errors.content }}</p>
                <v-file-input
                    class="mb-5"
                    :error-messages="errors.image"
                    v-model="form.image"
                    label="File input"
                    chips
                    dense
                    clear-icon
                    @validate-on-blur="$v.form.image.$touch()"
                >
                </v-file-input>

                <v-select
                    class="mb-5"
                    :items="items"
                    label="Category"
                    dense
                    chips
                    counter
                ></v-select>

                <v-text-field
                    class="mb-5"
                    v-model="form.slug"
                    :counter="10"
                    label="Slug"
                    required
                    dense
                    :error-messages="errors.slug"
                    @input="$v.form.slug.$touch()"
                    @blur="$v.form.slug.$touch()"
                ></v-text-field>
                <v-btn class="mr-4" @click="submit">submit</v-btn>
                <v-btn @click="clear">clear</v-btn>
            </form>
        </v-col>
    </v-row>
    </v-container>
</template>

<script>
    // * Package
    import { mapState, mapMutations } from 'vuex'
    import { quillEditor } from 'vue-quill-editor'
    import { validationMixin } from 'vuelidate'
    import { required } from 'vuelidate/lib/validators'

    // * Css
    import 'quill/dist/quill.snow.css'

    export default {
        name: 'Store.Articles',
        components: {
            quillEditor
        },
        mixins: [validationMixin],
        validations: {
            form: {
                title: { required },
                slug: { required }
            }
        },
        data() {
            return {
                editorOption: {
                    placeholder: 'Type your post...',
                    readOnly: true,
                    theme: 'snow'
                },
                items: [
                    'News', 'Promo', 'Maintenance'
                ]
            }
        },
        computed: {
            ...mapState(['errors']),
            ...mapState('article', {
                form: state => state.form
            }),
            titleErrors () {
                if (!this.$v.form.title.$dirty) return errors
                !this.$v.form.title.required && errors.push('Title is required.')
                return errors
            },
            slugErrors () {
                if (!this.$v.form.slug.$dirty) return errors
                !this.$v.form.slug.required && errors.push('Slug is required.')
                return errors
            },
        },
        methods: {
            ...mapMutations('article', ['CLEAR_FORM']),
            submit () {
                this.$v.$touch()
                if (!this.$v.$invalid) {
                    console.log('valid');
                }
            },
            clear () {
                this.$v.$reset()
                this.CLEAR_FORM()
            },
        },
        destroyed() {
            this.CLEAR_FORM()
        }
    }
</script>

<style>
    .ql-editor {
        height: 40vh;
    }
</style>

这是我从Laravel得到的验证。

namespace App\Http\Requests\API\Admin\Article;

use Illuminate\Contracts\Validation\Validator;
use Illuminate\Http\Exceptions\HttpResponseException;
use App\Http\Requests\API\ApiRequest;

class StoreArticleRequest extends ApiRequest
{
    /**
     * Determine if the user is authorized to make this request.
     *
     * @return bool
     */
    public function authorize()
    {
        return true;
    }

    /**
     * Get the validation rules that apply to the request.
     *
     * @return array
     */
    public function rules()
    {
        return [
            'title' => 'required',
            'content' => 'required',
            'image' => 'required|mimes:jpg,jpeg,png,bmp|max:512',
            'category' => 'required',
            'slug' => 'required|unique:articles'
        ];
    }

    /**
     * Throw Http Response Exception
     *
     * @param Validator $validator
     * @return void
     */
    protected function failedValidation(Validator $validator)
    {
        throw new HttpResponseException($this->validatorResponse('failed', 422, $validator->errors()));
    }
}

也许你们所有人都可以分享你关于这个问题的经验和解决方案。

最好的方法是什么？

我不需要使用Vuelidate并且只使用来自我的后端的错误响应吗？

标签： laravelvue.jsvuetify.js

laravel - Laravel，Vue Js 与 Vuetify 和 Vuelidate

问题描述

解决方案

推荐阅读