element ui 使用知识点记录 form表单校验

╰半夏微凉° 2021-07-26 00:58 428阅读 0赞

element ui 中form表单是非常重要的，表单的验证也是很重要的。  
以往我使用的时候，基本都是指定表单规则rules，这个规则会在表单输入时，如果不符合表单验证规则，则会有提示，但是提交表单还是会提交成功，这时候就会把验证推给后台，后台服务器的压力会比较大。此时需要在前端进行表单校验。

进行表单校验则需要用到 form methods中的validate，  
validate:对整个比奥但进行校验的方法，参数为一个回调函数。该回调函数会在校验结束后被调用，并传入两个参数，是否校验成功和未通过校验的字段。若不传入回调函数，则会返回一个promise。

使用方法如下：

1.  获取form 一般是通过 this. r e f s . i t e m F o r m 以 及 t h i s . refs.itemForm 以及 this. refs.itemForm以及this.refs\[itemForm\]两种方式都是可以获取的
2.  给这个form使用validate方法，在回调中进行参数的处理

代码如下：

//这个表单的校验函数有两个参数，一个是是否校验成功，成功为true,失败为false,第二个参数是未通过校验的字段。以下代码中只有一个参数，如果为true则代表是校验成功，如果成功后则执行以下的代码。比如新增内容等。
    this.$refs.itemForm.validate((valid) => { 
      if (valid) { 
         if (this.medias) { 
           this.form.medias = [];
           //数组的forEach循环操作
           this.medias.forEach(media => { 
             this.form.medias.push({  mediaUrl: media.url });
           });
         }
         this.form.product = this.products.join(",");
         //filter过滤：此处的步骤是将categories中的每一项category都进行处理，返回的是return category.id,将每一项的Id都返回出去，赋值给this.form.categories
         this.form.categories = this.form.categories.filter(category => category.id);
         create(this.form).then(() => { 
           this.dialogVisible = false;
           //弹窗提示新增成功
           this.$message.success("新增成功");
           //重新获取表格数据，重新渲染表格
           this.getPage();
         });
       }
     });
     }