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

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

laravel-5.6 vue.js

Pankaj · 技术社区 · 6 年前

关于该问题

我将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 回复 | 直到 6 年前

Victor Oliveira 6 年前

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

已更改

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

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

推荐文章

StuP · 响应式Vue组件在数据更改时不更新

2 年前

dbzx10299 · 对从Api端点返回的数据使用Vue转换组

2 年前

mrDandaleonx · Vue3获取div内容并将其发布到表单

2 年前

ateymour · Vue3在异步调用后将道具传递给子组件

2 年前

Artur Müller Romanov · 是否可以有条件地渲染布局?

2 年前

Ilijanovic · 对象可能未定义

2 年前

devAR · 单击其他组件时,单选按钮未保持选中状态

2 年前

Coderama · 在v-for指令中使用:key属性时,TS应出现类型错误

2 年前

Suffii · Vue表单输入绑定的条件绑定存在问题

2 年前

akkonrad · 函数的作用是:返回数据属性为空的实例

2 年前