vee-validate 验证消息在 Laravel 5.6.7 中不起作用

Question

我正在使用 Laravel 5.6.7 和 vue.js 进行表单验证。我已经使用npm install vee-validate@next --save成功安装了

<form role="form">
    <select name="Role_ID" v-validate data-vv-rules="required">
        <option :value="-1" selected>Please select Role</option>
        <option v-for="RoleRecord in RoleRecords" :value="RoleRecord.Role_ID">
              {{RoleRecord.Role}}
        </option>
    </select>
    <p v-if="errors.has('Role_ID')">{{ errors.first('Role_ID') }}</p>

    <!-- UserName -->
    <div>
        <label>UserName</label>
        <div class="col-md-9">
            <input name="User Name" v-validate data-vv-rules="required" type="text"
                v-model="createForm.UserName">
            <p v-if="errors.has('User Name')">{{ errors.first('User Name') }}</p>
        </div>
    </div>
    <button type="button" @click="validateBeforeSubmit()">
        Save Changes
    </button>
</form>

<script>
    export default {        
        methods: {
            validateBeforeSubmit() {
                this.$validator.validateAll();
            }
        }
    }
</script>

我的发现

1. 由于某些原因，该选项未被验证。
2. UserName 字段运行良好。

如果选项选择的值小于 0，我希望它应该显示错误消息

我错过了什么吗？如果您需要更多信息，请告诉我。

Answer 1

你的命名有区别：

<input name="User Name" v-validate data-vv-rules="required" type="text" v-model="createForm.UserName">
<p v-if="errors.has('User Name')">{{ errors.first('User Name') }}</p>

v-model 使用UserName（没有空格）。您输入中的名称属性和errors.has + errors.first 使用User Name（带空格）。请确保您在前端和后端的命名完全相同（最好没有空格）。

Answer 2

在vee-validate doc，

正在验证的字段必须具有非空值。默认， 如果所有验证器具有“空值”，则所有验证器都会通过验证，除非 他们是必需的。这些空值是：空字符串、未定义、 空。

-1 仍被视为required 验证的有效值。请改用指定的empty values。 （即：空字符串，undefined，null）

例如

<option :value="null" selected>Please select Role</option>

这应该会触发required 验证。

示例：https://codepen.io/jacobgoh101/pen/geaqwr?editors=1011