clearValidate()和resetFields()表单校验的用法和区别

1.整个表单的校验移除

		
			
		
		
			
		
	
	// 根据判断条件, 移除所有表单项的校验
	if (/*条件*/) {
		this.$refs['form'].clearValidate();
	}

	// 但是有时候只需要移除其中的某一项校验, 如只移除姓名的校验:
	if (/*条件*/) {
		this.$refs['form'].clearValidate(['name']);
	}
	

2.resetFields和clearValidate区别

this.$refs.form.resetFields(); //移除校验结果并重置字段值
this.$refs.form.clearValidate(); //移除校验结果
// 二者都能清除验证，但是resetFields（）会重置字段值，而在vue中大量用到的数据的绑定，很可能出现
// 同一个数据绑定在多处的情况，如果滥用resetFields很可能造成界面上出现莫名的bug

3.注意
有可能this.$refs[form].clearValidate()方式不识别。需要使用:this.$refs.form.clearValidate();

4.element-ui中的表单校验
表单代码

  
    
  

保存
重置

方法

// 校验规则
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官网说明）：

相关文章：
Form 表单(Element官网)：
https://element.eleme.cn/#/zh-CN/component/form#form-biao-dan
完整form校验
https://www.cnblogs.com/weiqinl/p/6708993.html