Vee-validate Validate on blur 防止表单提交

Question

我正在使用 vee-validate 来验证 vue.js 中的表单。应该在模糊时触发验证。有一个提交按钮可以验证表单中的所有字段。

问题是，当我在输入一些内容后单击提交按钮时，只会触发模糊事件并验证输入字段。不会触发提交事件。如果我再次单击该按钮，将触发提交事件。

<form v-on:submit.prevent="submit" autocomplete="off">
    <div>
      <div>{{ errors.first('carNumber') }}</div>
      <input v-model="carNumber" name="carNumber" v-validate="'numeric'"/>
      <button type="submit">Submit</button>
    </div>
</form>

示例代码link：https://jsfiddle.net/2u6n7xfr/35/

重现步骤：

在输入中键入一些无效值，即：qwerty。
点击提交按钮。（未触发提交事件。）
在输入中键入一些有效值，即：1234。
点击提交按钮。（未触发提交事件。）

Answer 1

替换

this.$validator.validate("*").then(function(valid) {

与：

this.$validator.validateAll().then(function(valid) {

参见：https://jsfiddle.net/Ljo9uw1y/

--

你提到的另一个问题与物理点击按钮有关：我认为你的问题是提交按钮 "moves" 当你点击它时，所以事件没有被触发。例如，将错误移动到提交按钮下方会导致点击起作用：jsfiddle.net/5goe4vcf

对此的一个解决方法是缩小错误消息，这样它就不会导致向下出现大的气泡，同时使提交按钮变大，这样它就不会在提交过程中退出鼠标指针的范围。点击。

Vee-validate Validate on blur 防止表单提交

Vee-validate Validate on blur prevents form submit

javascript

validation

vue.js

vuejs2

vee-validate