VeeValidate v3 防止点击模糊验证答案

【问题标题】：VeeValidate v3 prevents clicks on blur validationVeeValidate v3 防止点击模糊验证
【发布时间】：2020-02-29 06:39:37
【问题描述】：

我在第一个字段上有自动对焦的表单。我正在使用急切的验证模式。

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

有没有办法以某种方式允许空值模糊，除非我在提交时手动调用验证？

我的代码sn-p：

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

【问题讨论】：

标签： vue.js bootstrap-4 laravel-mix vee-validate

【解决方案1】：

我想澄清一下，vee-validate 不会阻止“点击”事件，只是当您在外部点击时，您会模糊该字段。因此，当错误消息出现时触发验证，它会由于其行高而将其他元素向下推，从而将按钮/链接向下推，从而导致您单击外部。

我想说这不是 vee-validate 问题，而是 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 框架无法处理这种情况，您可以为他们 PR 或在他们的项目跟踪器中打开问题。

【讨论】：

【解决方案2】：

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

setInteractionMode('passive');

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

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

【讨论】：