vue.js - 如何使用 Vue.js 和 Vuelidate 验证模糊字段

标签 vue.js bootstrap-vue vuelidate

我正在使用 Bootstrap-Vue 表单输入,并使用 Vuelidate 进行验证。目前,在用户输入时,我得到轮廓颜色(红色或绿色)和复选框或十字,具体取决于有效或无效。我现在想改变这种行为,使其仅在模糊时显示。我将以下代码行添加到我的输入中,但是发生了相同的行为:

@blur="$v.form.code_part1.$touch()"

这是我的完整输入代码,请您解释一下我哪里出错了,或者如何正确处理这个问题?

<b-form-input
              :class="{ 'hasError': $v.form.code_part2.$error }"
              placeholder="Next Four"
              v-model="$v.form.code_part2.$model"
              @blur="$v.form.code_part1.$touch()"
              :state="$v.form.code_part2.$dirty ? !$v.form.code_part2.$error : null"
              class="form-control mb-3"
              name="Part 2"
              id="code_part2"
              type="text"
              maxlength="4"
              aria-label="Next Four"
></b-form-input>

最佳答案

添加.native修饰符

@blur.native="$v.form.code_part1.$touch()"

Binding Native Events to Components

关于vue.js - 如何使用 Vue.js 和 Vuelidate 验证模糊字段,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/57924238/

相关文章:

vue.js - Vue预渲染闪烁

vuejs2 - Bootstrap-vue b-table : How to set an css-Class for inactive rows?

vue.js - Vuelidate 重置特定字段,以便 $error 标志为 false

javascript - 如果 NightwatchJS 中不存在元素,如何停止测试而不出错

vue.js - vuetable-2 中的 Vue-multiselect v-model ="value[?]"

javascript - "vue entry point"在哪里?

javascript - Bootstrap-vue 不加载 CSS

vue.js - 如何在 vuelidate 验证中使用条件运算符?

javascript - Vue js vuelidate 自定义验证

css - 如何获取 CSS 溢出和高度 :calc to work in a resizable div