清除ElementUI的el-input标签的校验——使用validate方法-区别之resetFields()-移除校验结果并重置字段值 & clearValidate()-移除校验结果

清除ElementUI的el-input标签的校验——使用validate方法-区别之resetFields()-移除校验结果并重置字段值 & clearValidate()-移除校验结果

1、在el-form上方写属性 ref=“form”

<el-form ref="form" :model="form"  :rules="rules"  label-width="90px">

2、写清空代码，这里的form一定要和ref的值一致

this.$nextTick(() => { // 表单数据置空 并且移除校验
     this.$refs['form'].resetFields();
})

1、详解-resetFields()与clearValidate()

resetFields()与clearValidate()的区别

1、介绍

2、区别

相同点：二者都能移除表单校验

不同点：resetFields()会对整个表单进行重置，将所有的字段重置为初始值

clearValidate() 只会移除表单校验，而且可以只对部分字段进行移除校验

3、使用场景

resetFields()会移除表单校验并初始化表单，一般用于新增

clearValidate()移除全部或部分表单校验，一般用于修改、编制

4、两者用法基本一致

this.$refs.form.resetFields();

this.$refs[‘form’].resetFields();

this.$refs.form.clearValidate();

this.$refs[‘form’].clearValidate();

this.$refs.form.clearValidate(“a”);

this.$refs.form.clearValidate([“b”,“c”]);

5、注意事项

1、resetFields()会重置字段值，而在vue中大量用到的数据的绑定，很可能出现同一个数据绑定在多处的情况，如果滥用resetFields很可能造成界面上出现莫名的bug
　　// 下图为项目中的bug

左边的树和右边的表单用了绑定了相同的数据，

点击左边树的每个节点可以在右边进行编辑，右边点击保存，会对数据进行校验，

左边树结构每次点击不同节点都要重置校验，

误用了resetFields，会造成-去重置仓库》大楼数据为空》再次左边树结构的数据消失，变为空白。

2、添加和修改公用一个弹窗，点击添加弹窗后，

如果没移除表单校验的话，再点击修改弹窗时校验就会被记住，

所以需要移除校验，但在清空表单校验时会报如下错误：

解决方案：

this.$nextTick(()=>{
   this.$refs.form.resetFields();  
})

2、整个表单的校验移除

<Form ref="form" rule={this.rules}>
    <FormItem prop="name" label="姓名">
        <Input/>
    </FormItem>
    <FormItem prop="age" label="年龄">
        <Input/>
    </FormItem>
</Form>

js

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

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

3、vue3.0中的应用

1、结构

<el-form
         :model="form"
         label-width="auto"
         ref="ruleForm"
         :rules="rules"
         class="wrap-294 ml-34"
         >
</el-form>

2、方法

setup(props, { emit }) {
        const funMethods = {
            agreeChange:function(val){
                // console.log(val,"hhhhhhhhh");
                    if(val=2){
                        ruleForm.value.clearValidate();  //2、注意vue3.0写法
                    }
            },
        },
        return {
            state,
            ...toRefs(state),
            ruleForm,
            ...funMethods
        };        
}

显示效果-不带* 去除必选项

4、vue2.0中的应用-element-ui中的表单校验

相关文章：
Form 表单(Element官网)：
https://element.eleme.cn/#/zh-CN/component/form#form-biao-dan

实例1

表单代码

<el-form :label-width="120" :rules="formRules" :model="form" ref="form">
  <el-form-item label="活动名称" prop="name">
    <el-input v-model="form.name"></el-input>
  </el-form-item>
</el-form>
<el-button type="info" @click="save">保存</el-button>
<el-button type="info" @click="empty">重置</el-button>

方法

// 校验规则
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'); 
})

实例2

1、element-ui的表单校验使用validate方法。

参数为一个回调函数，该回调函数会在校验结束后被调用，并传入两个参数：是否校验成功和未通过校验的字段。
代码如下：

<el-form 
  ref="dynamicValidateForm" 
  :model="uploadObject">
  <el-form-item 
    label="名字"
    prop="name"
    rules="[
       { required: true, message: '请输入名字', trigger: 'blur' }
    ]">
    <el-input 
      v-model.trim="uploadObject.name">      
    </el-input>
  </el-form-item>
</el-form-item>

方法

this.$refs.dynamicValidateForm.validate((valid,obj) => {
  if(!valid){
    return false;
  }else{
    ......
  }
})

2、如果想移除表单的校验结果，可以调用clearValidate方法。参数为待移除的表单项的 prop 属性或者 prop 组成的数组，如不传参数则移除整个表单的校验结果。

this.$refs.dynamicValidateForm.clearValidate();

3、如果想重置表单，则可以调用resetFields方法，对整个表单进行重置，将表单的所有字段重置为初始值同时移除表单的校验结果。

this.$refs.dynamicValidateForm.resetFields();

clearValidate`方法。参数为待移除的表单项的 prop 属性或者 prop 组成的数组，如不传参数则移除整个表单的校验结果。

this.$refs.dynamicValidateForm.clearValidate();

3、如果想重置表单，则可以调用resetFields方法，对整个表单进行重置，将表单的所有字段重置为初始值同时移除表单的校验结果。

this.$refs.dynamicValidateForm.resetFields();