Question

我正在使用带有vue.js的Laravel 5.6.7进行表单验证。我已使用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>

我的发现

由于某些原因，该选项未经过验证。
UserName字段工作正常。

如果选项选项值小于0

我错过了什么吗？如果您需要更多信息，请与我们联系。

Answer 1

<{3>}中的

，

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

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

e.g。

null

这应该触发<option :value="null" selected>Please select Role</option>验证。

示例：vee-validate doc

Answer 2

您的命名之间存在差异：

<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（没有间距）。输入中的name-attribute和errors.has + errors.first正在使用User Name（带间距）。请确保在前端和后端（最好没有空格）命名完全相同的东西。

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

2 个答案: