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

Question

在下面附上我的代码框链接以供参考 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

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/