Element UI resetFields与clearValidate方法

表单代码

  
    
  

保存
重置

方法

// 校验规则
formRules: {
     name: [
            { required: true, message: '请输入活动名称', trigger: 'blur' },
            { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
     ],
}
/**
 * 保存函数
 */
save（） { 

  this.$refs['form'].validate((valid) => {

      if (valid) {

        alert('submit!');

      } else {

        console.log('error submit!!');

        return false;

      }

    });

  }
  //有可能this.$refs['form'].validate() 方式不识别。需要使用: this.$refs.form.validate();
})
empty（） { //重置
  //根据需求二选一
  /**
   * 移除校验结果并重置字段值
   * 注：清除表单项name的校验及数值
   */
  this.$refs.form.resetFields(); 
  /**
   * 移除校验结果
   * 注：只清除表单项name的校验，不清楚表单项name的数值
   */
  this.$refs.form.clearValidate('name'); 
})

表单方法（Element官网说明）：

方法名	说明	参数
validate	对整个表单进行校验的方法，参数为一个回调函数。该回调函数会在校验结束后被调用，并传入两个参数：是否校验成功和未通过校验的字段。若不传入回调函数，则会返回一个 promise	Function(callback: Function(boolean, object))
validateField	对部分表单字段进行校验的方法	Function(prop: string, callback: Function(errorMessage: string))
resetFields	对整个表单进行重置，将所有字段值重置为初始值并移除校验结果	—
clearValidate	移除表单项的校验结果。传入待移除的表单项的 prop 属性组成的数组，如不传则移除整个表单的校验结果	Function(props: array)

注：
clearValidate方法使用，注意element ui的版本：element ui^2.4.3才支持传入参数，清空指定校验结果的 FormItem

按版本安装可以看我的另一篇文章：npm 安装指定版本（按版本安装）

相关文章：
Form 表单(Element官网)
https://www.cnblogs.com/weiqinl/p/6708993.html