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

Question

说明 - vue.js 网页表单验证场景

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

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

问题：

1. 当使用 dom 的 form.reset() 方法时，无法将表单重置为没有错误类的状态。 ajax提交后处理重置表单的正确方法是什么？ 当您单击“重置”按钮时，如何在没有验证文本的情况下恢复到初始状态并在下方显示 css 突出显示？

2. 在jsfiddle示例中，浏览器控制台调试模式

   • 既然删除错误类的条件之一就是将$submitted 的值设为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;
     • 值不会改变。

3. 另一种可能的解决方法，在这个 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();
});

将表单设置为原始，字段设置为未触及。创作者表示他将在下一个版本中添加功能。

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

它带有一个重置方法。顺便说一句，在您的测试中不要忘记像 dfsq 所说的那样休息模型

Answer 2

更新： 这是您在成功提交后重置表单的方式。

1. 使用 javascript 选择器来选择表单。假设你只有 页面中的一个表单，这将是理想的。

let form = document.querySelector('form');
form.reset();

1. 如果您使用的是vee-validate，则需要重置验证器，使其不会抛出错误。

this.$validator.reset()

应该就是这些了。

Answer 3

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

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

或其他选项

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