AJAX请求后如何将表单重置为初始状态（含验证状态重置）

我之前也碰到过一模一样的问题！原生的reset()方法只会把表单字段的值恢复到初始状态，完全不会处理我们手动添加的验证状态类（比如untouched/dirty/valid/invalid），也不会重置提交按钮的激活状态。要彻底重置，得把这些部分都手动处理一遍，下面是具体的解决步骤和代码示例：

1. 先执行原生表单重置 #

这一步你已经做了，但还是列出来确保流程完整：

$('#myForm')[0].reset();

2. 重置所有字段的验证状态类 #

遍历表单里的所有输入字段，移除标记过的状态类，恢复到初始的untouched状态，同时如果有错误提示元素也要一并隐藏：

$('#myForm .form-control').each(function() {
  // 移除脏值、有效、无效状态类，添加未触碰状态类
  $(this).removeClass('dirty valid invalid')
         .addClass('untouched');
  // 隐藏对应的错误提示（如果有的话）
  $(this).siblings('.error-message').hide();
});

3. 重置提交按钮的禁用状态 #

把提交按钮恢复到初始的禁用状态：

$('#submitBtn').prop('disabled', true);

4. 重置自定义的验证状态变量（如果有的话） #

如果你的验证逻辑是用全局变量或者对象来存储每个字段的状态（比如记录是否触碰、是否有效），一定要把这些变量也重置回初始值：

// 假设你之前用这个对象存状态
formValidationStates = {
  username: { untouched: true, dirty: false, valid: false },
  email: { untouched: true, dirty: false, valid: false },
  password: { untouched: true, dirty: false, valid: false }
};

补充：如果用了第三方验证库 #

要是你之后换成了像jQuery Validate或者Parsley.js这类验证库，它们都有内置的重置方法，比如：

• jQuery Validate：

  $('#myForm').validate().resetForm();
  

• Parsley.js：

  $('#myForm').parsley().reset();
  

这些内置方法会帮你自动处理状态类、按钮状态和内部变量，比手动写更省心，但如果是自己手写的验证逻辑，上面的手动重置步骤就完全够用啦。

内容的提问来源于stack exchange，提问作者Ramlal S