分类导航

程序问答发布时间：2022-06-02 发布网站：大佬教程 code.js-code.com

大佬教程收集整理的这篇文章主要介绍了寻找一种在 Vue 表单中翻译（i18n）laravel 表单验证规则的方法，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。

如何解决寻找一种在 Vue 表单中翻译（i18n）laravel 表单验证规则的方法？

开发过程中遇到寻找一种在 Vue 表单中翻译（i18n）laravel 表单验证规则的方法的问题如何解决？下面主要结合日常开发的经验，给出你关于寻找一种在 Vue 表单中翻译（i18n）laravel 表单验证规则的方法的解决方法建议，希望对你解决寻找一种在 Vue 表单中翻译（i18n）laravel 表单验证规则的方法有所启发或帮助；

所以我用 Vue 在 laravel 中构建了一个带有一些验证规则的表单，这有效，当出现错误时，它会向我显示一条消息，但我也有一个语言环境切换器，它也适用于表单中的文本，但不是对于验证输出，所以总是有英文的。我正在使用 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','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>