欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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

 更新時間:2020年09月11日 13:05:02   作者:封狼居胥_神都  
這篇文章主要介紹了element-ui和vue表單(對話框)驗(yàn)證提示語(殘留)清除操作,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧

問題是這樣的:

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

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

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

在 “ 代碼二 ” element-ui中定義一個 ref="form" 起到參照的作用(reference),watch中的form與此相對應(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('順序值不能超過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="請輸入調(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>

圖二、

但是,這樣會頁面調(diào)試模式會報錯 “ Cannot read property 'resetFields' of undefined ” 錯誤, 應(yīng)該是第一次彈出dialog對話框的時候沒有弄到DOM里, 需要修改vue中的watch代碼, 做個限定. 這樣不但可以清除提示語, 還可以清空輸入框里內(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ǔ)充知識:elementUI vue 編輯中的input的驗(yàn)證殘留清除

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

this.$refs["from"].resetFields(); //移除校驗(yàn)結(jié)果并重置字段值

this.$refs["from"].clearValidate(); //移除校驗(yàn)結(jié)果

以上這篇element-ui和vue表單(對話框)驗(yàn)證提示語(殘留)清除操作就是小編分享給大家的全部內(nèi)容了,希望能給大家一個參考,也希望大家多多支持腳本之家。

相關(guān)文章

最新評論