尝试在Vuejs中显示验证错误消息时出错

Question

在下面附上我的codesandbox链接以供参考https://codesandbox.io/s/misty-flower-qzmzo?file=/src/App.vue

有人能帮我吗，如何添加一个监听器来验证初始输入。

<input
type="text"
class="form-control"
placeholder="First Name"
value=""
v-model="user.name"
/>
<div
v-if="this.submitted && !$v.user.name.required"
class="invalid-feedback left"
>
Enter Username
</div>
<input
type="text"
class="form-control"
placeholder="Enter your company email ID"
value=""
v-model="user.email"
autocomplete="off"
/>
<div
v-if="this.submitted && $v.user.email.$error"
class="invalid-feedback left"
>
<span v-if="!$v.user.email.required">Email is required</span>
<span v-if="user.email && !$v.user.email.email"
>Enter valid email address</span
>
<span
v-if="user.email && $v.user.email.email && !$v.user.email.maxLength"
>Email is allowed only 30 characters</span
>
</div>

我正在处理表单验证错误消息，但问题是，最初加载表单时，错误验证显示为"；该字段是必需的"；

但我希望这些验证错误消息显示出来，当用户在输入字段中输入任何字符时，如果他删除了这些字符，那么验证就会显示出来。

在下面附上我的codesandbox链接以供参考https://codesandbox.io/s/misty-flower-qzmzo?file=/src/App.vue

Answer 1

在created()函数中，这两行导致触发表单验证。这两行代码的目的是什么？

created() {
this.submitted = true;
return this.$v.$touch();
},

在加载时将提交的标志设置为true似乎很奇怪。

此外，如果要聚焦输入字段，请添加autofocus属性。

删除这两行可以解决问题并停止表单验证。仅删除this.$v.$touch()将导致仅验证第一个输入。

编辑：根据要求，这里是一个更新的代码示例。您的验证逻辑中有一些错误，并且在表单提交时缺少验证触发器。

https://codesandbox.io/s/nameless-wildflower-jqt8e

以下是有关验证的更多信息：

https://webomnizz.com/form-handling-and-validation-with-vuejs/