javascript - 尝试在 Vuejs 中显示验证错误消息时出错?
问题描述
在下面附上我的代码和框链接以供参考 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>
我正在处理表单验证错误消息,但问题是,最初加载表单时,错误验证显示为“此字段是必需的”
但是我希望显示那些验证错误消息,当用户在输入字段中输入任何字符,然后如果他删除它,那么验证应该显示。
在下面附上我的代码和框链接以供参考 https://codesandbox.io/s/misty-flower-qzmzo?file=/src/App.vue
解决方案
在您的created()
函数中,这两行导致触发表单验证。这两行代码的目的是什么?
created() {
this.submitted = true;
return this.$v.$touch();
},
您在加载时将提交的标志设置为 true 似乎很奇怪。
此外,如果您想关注输入字段,请添加autofocus
属性。
删除这两行可以解决您的问题并停止表单验证。删除 justthis.$v.$touch()
将导致仅验证第一个输入。
编辑:这里要求的是一个更新的代码示例。您的验证逻辑中有一些错误,并且缺少表单提交验证的触发器。
https://codesandbox.io/s/nameless-wildflower-jqt8e
以下是有关验证的更多信息:
https://webomnizz.com/form-handling-and-validation-with-vuejs/
推荐阅读
- python - 以下简单的文件操作程序是否有更短的代码?
- javascript - 在 ng-repeat 中过滤数据以仅使用 Angularjs 显示单击的项目
- r - RStudio:部分编号不编织,但将通过命令行
- javascript - 如何解决 TypeError:无法将“null”转换为 int
- java - 在Java中从内存中删除数组
- php - Php:我可以在文本文件中添加行,但我不能删除它们
- proxy - 通过代理云功能将 GCS 上的文件流式传输到客户端
- php - 将json写入文件,只写了一行
- h3 - 确定实际 H3 六边形尺寸的最佳方法?
- google-cloud-firestore - Firestore 事务 - 在行级别或字段级别锁定