Question

Discription - vue.js Web表单验证方案

使用的vue-form验证器库来自 https://github.com/fergaldoyle/vue-form

jsfiddle链接：https://jsfiddle.net/zfqt4yhq/51/

问题：

使用dom的form.reset（）方法时无法将表单重置为没有错误类的状态。在ajax提交后处理重置表单的正确方法是什么？当你点击“重置”按钮时，如何恢复到初始状态而没有验证文本出现在＆amp; css突出显示？
在jsfiddle示例中，浏览器控制台调试模式
- 因为删除错误类的一个条件是将$ submitted value设为false，但是如何更改$ submitted值？
<field-messages name="name" show="$touched || $submitted" class="form-control-feedback"> <div>Success!</div> <div slot="required">Name is a required field</div> </field-messages>
- var vueformapp = new Vue({ ... });
- vueformapp.$data.formstate.name.$touched = true // = false;
  - 值已更改。
- vueformapp.$data.formstate.name.$submitted = ture // false;
  - 值不会改变。
另一种可能的解决方法，在这个jsfiddle案例中是否有任何CSS hack来实现重置表单。

Answer 1

遗憾的是，库似乎没有根据https://github.com/fergaldoyle/vue-form/issues/55

重置字段

用户建议您使用：

Object.keys(myFormState).forEach(k => {
  if (k[0] == '$') return;
  const field = myFormState[k];
  field._setPristine();
  field._setUntouched();
});

将表单设置为pristine，将字段设置为未触及。 Creator说他将在下一个版本中添加功能。

你也可以使用vuelidate： https://monterail.github.io/vuelidate/#sub-v-methods

带有重置方法。 BTW在您的测试中不要忘记像dfsq那样休息模型

Answer 2

最新版本中添加的重置功能： https://github.com/fergaldoyle/vue-form/releases/tag/4.0.2

Answer 3

我遇到了同样的问题。一开始，成功提交后，我将值设置为null或”。但这会触发验证器。（我正在使用vee-validate）。我尝试使用document.querySelector("form").reset();，但由于某种原因，它是一个事件侦听器，因此无法正常工作。

那是我使用document.getElementById("form").reset(); 而且有效。提交后，表单现在正在重置。

我希望对您有帮助

Answer 4

自定义验证显示标记css名称隐藏

$('.error').hide();

或其他选项

 $('#formname').clearValidation();

如何在ajax提交完成后重置vue-form

Discription - vue.js Web表单验证方案

问题：

4 个答案: