表单加载时的验证错误消息答案

【问题标题】：Validation Error messages on form load表单加载时的验证错误消息
【发布时间】：2018-09-03 19:19:21
【问题描述】：

关于问题

我正在使用 Laravel 5.6.7 和 vue.js。 vee-validate 用于验证

当表单加载时，它会显示验证错误消息。用户甚至没有点击提交按钮。下面是截图。

代码

<template>
    <div>
        <form role="form">                    
            <input v-validate data-vv-rules="required" type="text" 
                                                  v-model="UpdateForm.First_Name">
            <p v-if="errors.has('First Name')">{{ errors.first('First Name') }}</p>
            <button type="button">
                Update Profile
            </button>
        </form>
    </div>
</template>
<script>
    export default {
        data() {
            return { 
                UpdateForm: {
                    First_Name: ''
                }
            }
        },
        created() {
            this.GetProfile();
        },
        methods: {
            GetProfile() {
                axios.post("some api url", {}).then(response => {
                    this.UpdateForm.First_Name = response.data.Data.First_Name;
                });
            }
        }
    }
</script>

我可以摆脱表单加载时的验证错误消息吗？

【问题讨论】：

标签： vue.js laravel-5.6

【解决方案1】：

这不是预期的行为。对于初始验证，您需要通过v-validate.initial 通知它。

也许您在声明 v-validate 时或在其他地方定义了这种情况。

Vue.use(VeeValidate);
new Vue({
  el: '#demo'
})

.is-danger{
  color: red;
}

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

<div id="demo">
  <label>This one needs touching</label>
  <input type="text" name="name" v-validate="'required'">
  <div v-show="errors.has('name')" class="is-danger">Errors: {{ errors.first('name') }}</div>
  <br/>
  <label>This one does not need touching</label>
  <input name="name2" v-validate.initial="'required'" type="text">
  <div v-show="errors.has('name2')" class="is-danger">{{ errors.first('name2') }}</div>
</div>

【讨论】：

我应该删除这个data-vv-rules="required"，而是把这个？ v-validate.initial="'required'" 如果是这样，现在验证完全不起作用。
当使用v-validate.initial 时，将在触摸输入之前进行验证。会发生什么？
v-validate.initial 或 v-validate 不会影响代码。
可能是因为您没有在输入中添加名称。尝试使用 errors.has('first_name') 并将标签 name="first_name" 添加到输入中，它应该可以工作

【解决方案2】：

改变了

this.editForm.First_Name = Data.User.First_Name;

到

if(Data.User.First_Name != null && Data.User.First_Name != "") {
    this.editForm.First_Name = Data.User.First_Name;
}

现在验证工作正常。基本上变量没有初始化。

【讨论】：