element-ui和vue表單(對話框)驗證提示語(殘留)清除操作

更新時間：2020年09月11日 13:05:02 作者：封狼居胥_神都

這篇文章主要介紹了element-ui和vue表單(對話框)驗證提示語(殘留)清除操作，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧

問題是這樣的：

如果一個頁面有多個按鈕打開相同的element-ui的Dialog對話框，那么如果第一個點擊"順序"按鈕出現(xiàn)紅色驗證提示語后，再點擊“取消”，或者點擊頁面空白處此對話框消失，而后再點擊同一個“順序”按鈕亦或別的“順序”按鈕，那么此紅色提示依然存在，顯然是無法忍受的，那么怎么去除呢，

這里也用到一個vue的一個語法watch，從字面意思上理解就是起到監(jiān)控的作用，監(jiān)控這個diaLog對話框的打開和關閉。

在 “ 代碼一 ” vue中的data前面加上watch來監(jiān)控對話框，對于function中的val,oldVla兩個參數(shù)不必過多糾結，只要任意一個變量都可以，只是起到打開和關閉的暫存而已（個人理解）

在 “ 代碼二 ” element-ui中定義一個 ref="form" 起到參照的作用（reference）,watch中的form與此相對應，resetFields取自element-ui官網上的Form表單里的方法名, 看 “ 圖二 ”官網截圖

代碼一、

  let result = Vue.extend({
   name: 'recommend-list',
   template: template,
   watch: {
    dialogSequenceVisible: function (val,oldVla) {
     this.$refs["form"].resetFields();
    }
   },
   data() {
    let validateSequence = (rule, value, callback) => {
     let val = this.trim(value);
     if (val == '') {
      callback(new Error('順序值不允許為空'));
     } else if (value > 9223372036854775807) {
      callback(new Error('順序值不能超過9223372036854775807'));
     } else if (!this.isNumber(val)) {
      callback(new Error('必須輸入正整數(shù)'));

代碼二、

<el-dialog title="調整順序" :visible.sync="dialogSequenceVisible" style="width:80%" @close='closeDialog'>
 
   <el-form label-width="200px" :model="form" style="margin:0 auto;" :rules="rules" ref="form">
 
    <el-form-item label="請輸入調整的順序值："
        prop="sequence">
     <el-input v-model="form.sequence" style="width:200px" auto-complete="off"></el-input>
    </el-form-item>
 
   </el-form>
   <div slot="footer" class="dialog-footer">
    <el-button @click="dialogSequenceVisible = false">取 消</el-button>
    <el-button type="primary" @click="position()">確 定</el-button>
   </div>
  </el-dialog>

圖二、

但是,這樣會頁面調試模式會報錯 “ Cannot read property 'resetFields' of undefined ” 錯誤, 應該是第一次彈出dialog對話框的時候沒有弄到DOM里, 需要修改vue中的watch代碼, 做個限定. 這樣不但可以清除提示語, 還可以清空輸入框里內容殘留，如下:

  let result = Vue.extend({
   name: 'recommend-list',
   template: template,
   watch: {
    dialogSequenceVisible: function (val,oldVla) {
     if (this.$refs['form'] != undefined) {
      this.$refs["form"].resetFields();
     }
    }
   },

補充知識：elementUI vue 編輯中的input的驗證殘留清除

當使用編輯的時候, 假如上次的驗證沒通過, 報紅了, 下次再點擊編輯的時候還會報紅,因此要清除驗證殘留, 方式有兩種: