代码之家 › 专栏 › 技术社区 › Pankaj

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

laravel-5.6 vue.js

Pankaj · 技术社区 · 7 年前

关于该问题

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

是否可以在加载表单时删除验证错误消息?

2 回复 | 直到 7 年前

Victor Oliveira 7 年前

这不是预期的行为。对于初始验证,您需要通知 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>

Pankaj 7 年前

已更改

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

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

推荐文章

base · 单击按钮时,如何从父组件打开位于子组件中的模态?

4 月前

Ben Foltz · 更新/删除递归子组件

6 月前

Andy BnOne · 我可以为泛型类型的道具设置默认值吗

6 月前

Felix · 更改vuetify v-field标签字体大小

6 月前

user2263572 · Vue.js在脚本与模板中调用util时的不同功能(以及考虑模板解包)

6 月前

CentralDev · 如何导出和导入js文件?

10 月前

Michael · 在Nuxt/Vue中安装传单的正确方法

10 月前

gespinha · 当元素不再可见时,如何更改ref元素?

11 月前

Brad · Vue Child组件对检索到的pinia/vueFire对象失去反应性

11 月前

gespinha · 使用Vue Router时,路由参数不会在Vue组件内渲染

11 月前