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>

示例代码链接：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/

-

您提到的另一个问题与物理上单击按钮有关：我认为您的问题是，单击提交按钮时该按钮“移动”，因此不会触发该事件。例如，将错误移动到“提交”按钮以下将使单击生效：jsfiddle.net/5goe4vcf

对此的一种解决方法是缩小错误消息，以使其不会导致向下的大气泡，并增大提交按钮，以使其在单击期间不会超出鼠标指针的范围。

Vee验证模糊验证可防止表单提交

1 个答案: