vue+elementUi——form表单校验提示清除(技能提升)

偏执的太偏执、 2022-09-04 02:54 1129阅读 0赞

今天在写后台管理系统时，用到了表单校验，为了能够校验必填项和类型等，需要用到表单中的 `rule`校验规则。最终效果如下：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70]  
由于在此页面上，`禁用`和`删除`两个功能基本类似，因此我是共用的一个弹窗展示。

所以导致，在禁用页面表单校验完成后，再进入删除页面时，在没有点击`提交`按钮时，就直接进行了表单校验，提示了校验报错信息。这样并不影响使用，但是页面美观度会差很多。

因此需要在进入此弹窗页面时，清除表单校验。

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70 1]

## `clearValidate`的用法 ##

我从网上找到的校验方法是：`this.$refs[formName].clearValidate();`  
我的想法是：在关闭弹层时，直接清空表单的校验结果。

代码如下：  
`html`部分：给`el-form`添加`:before-close="disableClose"`，然后函数对应的代码如下：

disableClose() { 
       this.disableForm = { };
        this.$refs['disableForm'].clearValidate();
        this.dialogDisable = false;
    },

上面的代码中，为了保证校验生效，先把`this.disableForm`清空了，这个也是百度找到了其他大神提供的思路。  
然而并没有什么卵用。。。

于是我想到，在弹窗打开时，清空表单校验会不会生效。

于是代码如下：

handleDisable(index, row) { 
        this.dialogDisable = true;
        this.disableForm = { 
            id: row.id,
            disablePictures: [],
            operator: this.userName
        }
        this.$nextTick(() => { 
            this.$refs['disableForm'].clearValidate();
        })
    },

上面的代码中，如果直接写`this.$refs['disableForm'].clearValidate();`,会报错提示`undefined`，一般遇到`refs`获取的`dom`提示`undefined`时，最直接最简单的解决办法就是`this.$nextTick`，页面渲染完成后，再获取`dom`。

## 去掉某个属性的表单校验：`this.$refs['disableForm'].clearValidate('属性名')` ##

`this.$refs['disableForm'].clearValidate('属性名')` 可以去掉对应属性的表单校验报错信息提示。

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70 2]

最终完成效果！！！！

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70]: /images/20220829/dbed0c69630545678bf751566d05dfbf.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70 1]: /images/20220829/4541200e5b164131a6adbd8f73bbd40a.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70 2]: /images/20220829/e535352d14954210be9df442062e7628.png