element-ui和vue表單(對(duì)話框)驗(yàn)證提示語(yǔ)(殘留)清除操作

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

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

問(wèn)題是這樣的：

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

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

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

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

代碼一、

  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('順序值不能超過(guò)9223372036854775807'));
     } else if (!this.isNumber(val)) {
      callback(new Error('必須輸入正整數(shù)'));

代碼二、

<el-dialog title="調(diào)整順序" :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="請(qǐng)輸入調(diào)整的順序值："
        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>

圖二、

但是,這樣會(huì)頁(yè)面調(diào)試模式會(huì)報(bào)錯(cuò) “ Cannot read property 'resetFields' of undefined ” 錯(cuò)誤, 應(yīng)該是第一次彈出dialog對(duì)話框的時(shí)候沒(méi)有弄到DOM里, 需要修改vue中的watch代碼, 做個(gè)限定. 這樣不但可以清除提示語(yǔ), 還可以清空輸入框里內(nèi)容殘留，如下:

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

補(bǔ)充知識(shí)：elementUI vue 編輯中的input的驗(yàn)證殘留清除

當(dāng)使用編輯的時(shí)候, 假如上次的驗(yàn)證沒(méi)通過(guò), 報(bào)紅了, 下次再點(diǎn)擊編輯的時(shí)候還會(huì)報(bào)紅,因此要清除驗(yàn)證殘留, 方式有兩種: