vue element-ui 表單驗證 第一次表單驗證的結果，在第二次表單驗證時仍然存在（需要清除上一次的驗證結果）

首先我們還是看一下文章：https://blog.csdn.net/weixin_37930716/article/details/90234705  的內容

筆者在參考該文章的時候，踩了一個坑，是vue父子組件通信中使用ref傳參的問題！

關鍵點：

該文章的作者的彈框組件是和父組件寫在同一個vue文件裏的，也就是沒有單獨把彈框的頁面代碼寫在另一個vue文件裏。這樣在父子組件通信的時候其實只有兩級通信，如果寫在單獨的一個vue文件裏，實際上就是三級通信。

清除上一次驗證結果的代碼就應該是：

if (this.$refs.子組件名稱.$refs.editForm)

this.$refs.子組件名稱.$refs.editForm.resetFields();

完整的案例展示：

代碼1：對話框和父組件的頁面代碼是在同一個vue文件裏

<template>
  <basic-container>
    <el-row>
      <el-col :span="22"></el-col
      ><el-col :span="2"
        ><el-button type="primary" round @click="handleAddDialogOpen"
          >添加</el-button
        ></el-col
      >
    </el-row>

    <el-dialog
      title="測試對話框"
      top="200px"
      width="40%"
      :fullscreen="false"
      :visible.sync="visible"
      :close-on-click-modal="true"
    >
      <el-row
        ><el-form :model="test" ref="refdata"
          ><el-form-item
            label="測試輸入框"
            prop="testinput"
            :rules="[{ required: true, message: '不能爲空' }]"
            ><el-input v-model="test.testinput"></el-input></el-form-item
        ></el-form>
      </el-row>
    </el-dialog>
    
  </basic-container>
</template>

 此時只有兩級通信，在【添加】按鈕點擊事件中添加如下代碼即可：

handleAddDialogOpen() {
      if (this.$refs.refdata) {
          this.$refs.refdata.clearValidate();
      }
      this.visible = true;
},

 代碼2：對話框是單獨的一個vue文件，和父組件不是在同一個vue文件裏

【添加】按鈕所在的 父組件的代碼（簡單示意）

<template>
  <basic-container>
    <el-row>
      <el-col :span="22"></el-col
      ><el-col :span="2"
        ><el-button type="primary" round @click="handleAddDialogOpen"
          >添加</el-button
        ></el-col
      >
    </el-row>
    <testDialog ref="testDlg"> </testDialog>
  </basic-container>
</template>

<script>
import testDialog from "./testDialog";

export default {
  components: { testDialog }

  data() {
    return {
       ... //此處省略
    }
  },
  methods: {
    handleAddDialogOpen(row) {
      ...//此處省略

    }
  }

}
</script>

 testDialog 對話框子組件的另一個vue文件的代碼：（注意ref參數）

<template>
  <basic-container>
    <el-dialog
      title="測試對話框"
      top="200px"
      width="40%"
      :fullscreen="false"
      :visible.sync="visible"
      :close-on-click-modal="true"
    >
      <el-row
        ><el-form :model="test" ref="testForm"
          ><el-form-item
            label="測試輸入框"
            prop="testinput"
            :rules="[{ required: true, message: '不能爲空' }]"
            ><el-input v-model="test.testinput"></el-input></el-form-item
        ></el-form>
      </el-row>
    </el-dialog>
    
  </basic-container>
</template>

此時，是三級組件的通信，注意看ref參數的定義。也就是說，對於【添加】按鈕所在的父組件來說，testDlg是它的兒子，testForm是它的孫子。

如果要實現testForm裏面的輸入框的表單驗證條件結果的清除，【添加】按鈕的事件中的代碼應該這樣寫：

handleAddDialogOpen() {
      if (this.$refs.testDlg.$refs.testForm) {
          this.$refs.testDlg.$refs.testForm.clearValidate();
      }
      this.visible = true;
},

筆者正是犯了這個錯誤，沒有意識到是三級通信，還是按照那篇博客那樣的寫法，導致清除不掉。

還應該注意clearValidate()和resetFields()方法的區別：一個是隻清除驗證條件的結果，一個是清除表單的全部內容，包括驗證結果和內容。

 

最後，關於表單驗證值得參考的幾篇博客：

可以參考學習這幾篇博客：（筆者搜索過程中發現的幾篇不錯的，值得學習的，放在這裏方便以後學習）

vue中ref的作用：https://www.cnblogs.com/xumqfaith/p/7743387.html   搞懂ref和$refs

elementUI 表單驗證的三種方式：https://segmentfault.com/a/1190000020410128?utm_source=tag-newest

給一個表單設置自定義規則或多個驗證規則：https://blog.csdn.net/qq_41862017/article/details/82223713###

表單驗證的觸發：https://blog.csdn.net/sunmeng_sunmeng/article/details/103893823

多表單的驗證：https://blog.csdn.net/u011210017/article/details/80221315

 

有問題歡迎來微信找我！一起學習成長，交個朋友！^_^

微信搜索：acoolgiser，或者直接掃描