寻找一种在 Vue 表单中翻译（i18n）laravel 表单验证规则的方法答案

【问题标题】：Looking for a way to translate(i18n) laravels form validation rules inside a Vue form寻找一种在 Vue 表单中翻译（i18n）laravel 表单验证规则的方法
【发布时间】：2021-08-17 06:47:19
【问题描述】：

所以我在 laravel 中使用 Vue 构建了一个带有一些验证规则的表单，这很有效，当出现错误时，它会向我显示一条消息，但我也有一个语言环境切换器，它也适用于表单中的文本，但不是对于验证输出，所以总是有英文的。我正在使用i18n 用于翻译文本的插件。

有没有办法让验证规则 i18n 准备就绪？

registerController.php

protected function validator(array $data)
{
    $customMessages = [
        'name' => 'some custom message can go here...',
    ];

    $validator = Validator::make($data, [
        'name' => ['required', 'min:2', 'string', 'max:100'],
        'email' => ['required', 'email', 'string', 'max:255', 'unique:users'],
        'password' => [
            'required'
            'min:10',
            'regex:/[a-z]/',      // must contain at least one lowercase letter
            'regex:/[A-Z]/',      // must contain at least one uppercase letter
            'regex:/[0-9]/',      // must contain at least one digit
            'regex:/[@$!%*#?&]/', // must contain a special character
        ],

    ], $customMessages);

    return $validator;
}

componentForm.vue

<template>

        <form @submit.prevent="formSubmit">            
           
            <el-input type="text" name="name" v-model="fields.name" 
                            label="Name" :error="errors.name"/>  

            <el-input type="email" name="email" v-model="fields.email" 
                            label="E-mailaddress" :error="errors.email"/>

            <el-input type="password" name="password" v-model="fields.password" 
                            label="Password" :error="errors.password"/>
        
            <button type="submit" class="btn btn--primary btn--xl btn--block">
                {{ $t("auth.register") }}
            </button> 
            
        </form> 

</template>

<script>

import espressoLocale from '../../Components/Contextual/Locale';
import espressoCard from '../../Components/UI/Card';
import elInput from '../../Components/Forms/Input';


export default {
    components: {
        elInput, 
    },
    data() {
        return {
          fields:{
              name: "",
              email: "",
              password: "",       
            },
            errors: {
                name: null,
                email: null,
                password: null,
            },
        }
    },
    methods: {
        resetFields () {
            this.fields.name = "";
            this.fields.email = "";
            this.fields.password = "";
        },
        formSubmit (e) {
            e.preventDefault();        
            this.errors = {};
            axios.get('/sanctum/csrf-cookie').then(response => {
                axios({
                    method: 'post',
                    url: '/api/register', 
                    data: {
                        name: this.fields.firstname,     
                        email: this.fields.email,
                        password: this.fields.password, 
                    },
                    validateStatus: (status) => {
                        return true; 
                    }
                }).then(response => {   
                    if (response.data.success) {                        
                    } else {
                        this.errors = response.data.errors || {};                                               
                    }
                }).catch(function (error) { });
            });            
        }
    },
}
</script>

【问题讨论】：

标签： laravel vue.js

【解决方案1】：

你应该在你的组件中写上:error="$t(errors.name)"，就像你写{{ $t("auth.register") }}来显示关于寄存器的翻译文本一样。 我假设您在错误响应中获得 i18n 语言环境结构化对象，如下所示：

errors: {
 name: 'errors.name',
 ...
}

【讨论】：