element ui form表单清空规则

Posted 王小宾

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了element ui form表单清空规则相关的知识,希望对你有一定的参考价值。

公司项目重构,经过商定使用element ui。在重构项目的时候发现一下element ui上很蛋疼的东西。

例如,这个form表单就是一个。趁着在高铁上没事,把想写的东西写一下。

 

先说一下element ui提交form表单的时候,如果没有进入我们预想的代码流程,一般就是你写的自定义验证规则有误。

例如如下代码。验证镜像的名称是否重复的一个方法。每个if-else都需要有内容。如若满足就要有一个callback()。

反正我是被这个地方给坑了,之前写代码,一般就是if满足条件之后怎么怎么样,这次必须return 一下内容

let that = this;
      var checkName = function (rule, value, callback) {
        let re = /^[A-Za-z0-9_\.\-\u4e00-\u9faf]+$/;
        if (!value) {
          callback(new Error(‘该字段为必填项‘));
        } else {
          if (re.test(value)) {
            let url = that.prefix + ‘/yr_images/create_image/‘;
            let data = {
              is_check_name: 1,
              name: value
            };
            that.Axios({
              method: ‘post‘,
              url: url,
              data: data,
              transformRequest:function (data) {
                let ret = ‘‘;
                for (let it in data) {
                  ret += encodeURIComponent(it) + ‘=‘ + encodeURIComponent(data[it]) + ‘&‘
                }
                return ret.slice(0, ret.length - 1);
              }
            })
              .then(function (res) {
                if (res.data.error_code != -200) {
                  return callback(new Error(‘名称重复‘))
                } else {
                  return callback()
                }
              })
              .catch(function (err) {
                console.log(err);
              })
          } else {
            callback(new Error(‘输入不符合规则‘))
          }
        }
      };

言归正传,我们公司验证表单大部分是弹框内验证的。

当我打开弹框,form验证规则不满足,然后我关闭弹框,按理说应该取消红色提示,可是没有。

想到form有一个重置按钮,然后想到完全可以使用该方法。

可是打开之后之后,在控制台会报错,说该方法不存在!

上网查原因,一大堆都有,最后查到是element ui 打开弹框的方法是自带延迟的。

于是,我就用了下面的方法。

setTimeout(function () {
          that.$refs[‘dialogContent‘].resetFields();
        },300)

还是有问题,如果网络慢怎么办,可能还是报错。

于是想到了js的try catch方法,我在外部给他包裹已一层try ,catch语句。问题解决!但是,测试最后提了个bug,那就是数据驱动的vue,页面内容没有改变。

内容被重复渲染。一直没有找到问题。最后才发现是setTimeout造成的!!!!!现在想想也傻,既然后try,catch了,为什么还要增加一个settimeout!!

try {
          setTimeout(function () {
            that.$refs[‘dialogContent‘].resetFields();
          },300)
        } catch (e) {

        }

最终方法如下:

try {
          that.$refs[‘dialogContent‘].resetFields();
        } catch (e) {

        }

问题解决

以上是关于element ui form表单清空规则的主要内容,如果未能解决你的问题,请参考以下文章

Element-ui的使用(二):Form表单(基本效验)

Element UI Form表单验证

elementui form 表单数据不置空问题

element-UI 表单校验规则

element-ui 表单组件的prop属性

element-ui 表单编辑之后再新增表单数据无法清空问题(已解决)