表单加载时验证错误消息

Question

关于此问题

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

我可以在表单加载时删除验证错误消息吗？

Answer 1

已更改

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;
}

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

Answer 2

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

也许你在宣布v-validate时或其他地方定义了这一点。

＆＃13;

＆＃13;

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

＆＃13;

.is-danger{
  color: red;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;