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-validate不会阻止“ click”事件，只是当您在外面单击时，您正在模糊该字段。因此，当错误消息出现时触发验证，由于行高，它会将其他元素向下推，从而将按钮/链接向下推，从而导致您单击外部。

我会说这不是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或在他们的项目跟踪工具中打开问题。

Answer 2

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

setInteractionMode('passive');

我只是在提交时手动致电验证：

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

VeeValidate v3防止点击模糊验证

2 个答案: