Laravel 5.6.7 和 Vue 中的自定义错误消息.js特别是组件

Question

我正在使用Laravel 5.6.7和vue.js

验证消息

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

1. 必需：请输入用户名。
阿尔法
2. ：请仅输入阿尔法字符。

我正在使用 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>

Answer 1

要实现您想要的，您可以使用特定于字段的自定义消息。

没什么，您只需创建一个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>

Answer 2

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