VeeValidate v3可防止单击模糊验证。

Question

我在第一个领域有自动对焦的形式。我正在使用急切的验证模式。

问题是，当我单击页面上的任何位置时，输入会失去焦点并得到验证，并取消对页面的单击。

是否有办法允许虚值模糊，除非我在提交时手动调用验证？

我的代码片段：

<b-form-group id="input-group-2" label="Your name:" label-for="input-2">
    <validation-provider name="name" rules="required|min:2" mode="eager" v-slot="{ errors }">
        <b-form-input
            id="input-2"
            v-model="credentials.name"
            placeholder="Your name"
            :class="{'is-invalid' : errors.length}"
            autofocus
        />
        <b-form-invalid-feedback :state="!errors.length">{{errors[0]}}</b-form-invalid-feedback>
    </validation-provider>
</b-form-group>

​

​

Answer 1

我想澄清一下，验证并不能阻止“点击”事件，只是当你点击外部的时候，你就模糊了这个字段。因此，当出现错误消息时，它会触发验证，它会将其他元素按下，这是因为它的行高，这会按下按钮/链接，从而导致您单击外部。

我想说的是，这不是一个vee验证问题，而是一个CSS问题，理想情况下，如果您在字段下面显示错误消息，您应该补偿额外的空间，以防止UI跳转，这对用户也是很烦人的。

一个简单的margin-bottom等于错误消息的行高，另一种方法是有一个带有相对包装器的绝对错误消息，有一个与线高相等的底部填充，并且它也能工作。

.InputMargin:not(.has-error) {
  margin-bottom: 16px;
}

.InputPadding:not(.has-error) {
  position: relative;
  padding-bottom: 16px;
}

.InputPadding:not(.has-error) span {
  position: absolute;
  bottom: 0;
  left: 0;
}

在这里查看示例：https://jsfiddle.net/logaretm/4mx0hy58/17/

现在，如果您选择的UI框架不能处理这种情况，您可以为他们进行公关，或者在他们的项目跟踪器中打开一个问题。

Answer 2

最终避免了自动验证，切换到了passive模式，而不是急切。在配置文件中，下面一行：

setInteractionMode('passive');

我只是在提交时手动调用validate：

async onSubmit() {
  const isValid = await this.$refs.observer.validate();