Laravel 5.6.7 和 Vue.js 中的自定义错误消息，尤其是组件

Posted 2023-02-23

【中文标题】Laravel 5.6.7 和 Vue.js 中的自定义错误消息，尤其是组件

【英文标题】：Custom Error Message in Laravel 5.6.7 and Vue.js in particular Component

【发布时间】：2018-08-24 21:16:12

【问题描述】：

我正在使用 Laravel 5.6.7 和 vue.js

验证消息

当验证在 vue.js 中起作用时，它会显示“用户名字段是必需的。”。可以是“请输入用户名”吗？我可以为同一个字段使用两个自定义错误消息吗？示例

必填：请输入用户名。 字母：请仅输入字母字符。

我正在使用 vee-validate 包进行表单验证

下面是刀片中的代码

<div class="container-fluid">
    <div class="row justify-content-center">
        <div class="col-md-12">
            <create-user></create-user>
        </div>
    </div>
</div>

vue.js 组件中的代码。

<template>
    <form role="form" class="row">      
        <input name="User Name" v-validate data-vv-rules="required|alpha" type="text"   
             v-model="createForm.UserName">
        <p v-if="errors.has('User Name')"> errors.first('User Name') </p>           
        <button type="button" @click="validateBeforeSubmit()" class="btn btn-primary">
            Create
        </button>
    </form>
</template>

<script>
    export default 
        data() 
            return 
                createForm:   
                    UserName: ''
                
            ;
        ,        
        methods: 
            validateBeforeSubmit() 
                this.$validator.validateAll();
            
        
    
</script>

【参考方案1】：

那是行不通的，使用 ajax 来获取数据 在 vuejs 和服务器之间

【参考方案2】：

要实现你想要的，你可以使用Field Specific Custom Messages。

没什么，你只需创建一个customMessages 字典并使用.localize() 将其添加到您的验证器中。

因此，您的模板中没有任何变化，但在您的 <script> 中，您将声明 customMessages 并将其应用到 created() 生命周期挂钩中，如下所示和演示：

<script>
    const customMessages =                                               // added
        custom:                                                          // added
            'User Name':                                                 // added
                required: 'Required: Please enter username',              // added
                alpha: 'Alpha: Please enter alpha chars only.'            // added
                                                                         // added
                                                                         // added
    ;                                                                    // added

    export default 
        data() 
            return 
                createForm:   
                    UserName: ''
                
            ;
        ,
        created()                                                        // added
            // change 'en' to your locale                                 // added
            this.$validator.localize('en', customMessages);               // added
        ,                                                                // added
        methods: 
            validateBeforeSubmit() 
                this.$validator.validateAll();
            
        
    
</script>

可运行演示：

Vue.use(VeeValidate);

const customMessages = 
  custom: 
    'User Name': 
      required: 'Required: Please enter username',
      alpha: 'Alpha: Please enter alpha chars only.'
    
  
;

Vue.component('create-user', 
  template: '#create-user-template',
  data() 
    return 
      createForm: 
        UserName: ''
      
    ;
  ,
  created() 
    // change 'en' to your locale
    this.$validator.localize('en', customMessages);
  ,
  methods: 
    validateBeforeSubmit() 
      this.$validator.validateAll();
    
  
);

new Vue(
  el: '#app'
)

<script src="https://unpkg.com/vue"></script>
<script src="https://cdn.jsdelivr.net/npm/vee-validate@latest/dist/vee-validate.js"></script>

<template id="create-user-template">
   <form role="form" class="row">      
        <input name="User Name" v-validate data-vv-rules="required|alpha" type="text"   
             v-model="createForm.UserName">
        <p v-if="errors.has('User Name')"> errors.first('User Name') </p>           
        <button type="button" @click="validateBeforeSubmit()" class="btn btn-primary">
            Create
        </button>
    </form>
</template>

<div id="app">
  To see the 'required' message: type "x", then delete<br>
  To see the 'alpha' message: type "_"<br><br>
  <div class="container-fluid">
      <div class="row justify-content-center">
          <div class="col-md-12">
              <create-user></create-user>
          </div>
      </div>
  </div>
</div>