element表單校驗提示定位到元素位置

Posted on by

需求來瞭

一般來說，element-ui的表單是提供表單校驗的，就是寫好隻有，點擊提交如果不通過會有紅字提醒，如下圖：

因為我們這次的表單內容比較多，是會有也沒滾動的情況，產品要求我們點擊提交去校驗的時候要

  • 彈出第一個沒有通過校驗的表單項的提示信息
  • 並且滾到目標窗口那裡

既然把需求分隔成瞭兩個點就一個一個來解決！

彈出校驗失敗的第一個信息

這個相對比較簡單，因為element的校驗函數大傢都用過，基本大傢一般都隻用第一個參數，就是是否校驗通過，這次我們要用到他的第二個參數就是校驗信息，會包括所有你的表單這次不通過校驗的字段和提示文字，我們隻需要取第一個即可，看代碼：

// 校驗規則像下面這樣
const rules = {
  name: {required: true, message: '請輸入活動名稱'},
  age: {required: true, message: '請輸入年齡'},
}

// 校驗函數                           // 重點是者第二個參數 message
this.$refs.formName.validate((valid, message) => {
  if (valid) { // 如果校驗通過則提交
    alert('submit!');
  } else { // 校驗不通過
    // 取第一個不通過的信息對象提示即可
    this.$message.error(message[Object.keys(message)[0]].message);
    return false;
  }
});

// message這個參數實際打印出來是這樣的（是一個對象）
// 1. 會根據你有多少個不通過校驗的表單項就會多少個信息對象在裡面
// 2. 信息對象會有兩個字段，一個是你的message提示文字，對應你的規則的message，一個是
//    你這個規則對應的字段
{
  name: { message: '請輸入活動名稱', field: 'name' },
  age: { message: '請輸入年齡', field: 'name' },
}

滾到目標窗口

錯誤做法🙅

對於這個功能，我的第一個想法就是錨點的跳轉，那麼相應的你就要設置好錨點，我們看看一般做法

  • 設置a標簽的href屬性：<a href="#test"></a>
  • 設置目標標簽的id屬性：<el-input id="test" />

那就是你要給所有的目標跳轉點設置上對應的屬性，然後通過校驗函數拿到屬性名，可是上面我們剛剛演示瞭，拿到校驗信息的第二個參數，裡面隻有校驗規則的字段和具體提示文字，也就是說你隻能用校驗規則的字段來作為錨點的屬性：

  • 也就是如果你的校驗規則是const rules = { name: { required: true, message: '請輸入姓名！' } };
  • 那麼能拿到的也隻有name這個屬性名字，拿到這個屬性再設置一個a標簽做跳轉

但是但是：由於我的表單內容很多，裡面也寫個各種根據業務分散瞭表單項的組件，所以我的rules實際是分散的，不是一個rules對象而已

  • 就會造成瞭屬性名重名
  • 再者我有200多個表單項目，寫那麼多把我手給寫殘廢

所以上述方案暫不適用於我！

正確做法🙆

接著我也百度瞭很多方法，基本的思想，也是根據屬性綁定給你要跳轉的標簽，然後在校驗函數獲取到屬性名再設置各種方法跳轉到目標標簽的位置，都不是我理想的方法，要麼不適用，要麼適用的代碼量太大，查找的過程之中我發現瞭一個不錯的讓視窗跳轉到指定的標簽的函數給瞭我一個啟發，先看看函數：

// 該scrollIntoView()方法將調用它的元素滾動到瀏覽器窗口的可見區域。
// el: 就是你的視窗要跳轉去的目標元素
// block：'center': 垂直中間對齊
// behavior: 'smooth': 過渡動畫絲滑滾動
el.scrollIntoView({ block: 'center', behavior: 'smooth' });

// 關於這個函數完整的文檔這這裡
// https://developer.mozilla.org/zh-CN/docs/Web/API/Element/scrollIntoView

就是上面這個函數，我可以很簡單的直接跳轉到目標標簽，那我們的目標標簽是什麼，出現紅字沒有通過校驗的表單項？不對，我們的目標標簽是出現紅字的標簽，也就是：

(標出藍色框)

既然每個不通過校驗的都會報紅字提示，那麼每個的紅字提示標簽肯定一樣的，我們來看看

（瀏覽器檢查元素）

el-form-item__error這個類名，讓我們看看是不是有很多個：

(打印el-form-item__error的元素標簽)

果然，我們證實瞭每個沒通過校驗的元素都會有這個標簽出現，那麼我們隻需要獲取這個提示標簽的第一個，然後用視窗跳轉函數跳轉過去即可，這樣不會有屬性名的問題，代碼量也很小：

const el = document.querySelectorAll('.el-form-item__error')[0];
el.scrollIntoView({ block: 'center', behavior: 'smooth' });

// 在vue實際開中你把這個代碼寫在element提供的表單校驗函數中會有點問題，會拿不到導致報錯
// el-form-item__error元素，所以要用一個$nextTick方法，如下
this.$nextClick(() => {
  const el = document.querySelectorAll('.el-form-item__error')[0];
  el.scrollIntoView({ block: 'center', behavior: 'smooth' });
});

就這樣相對簡單的完成瞭需求，但是還是要看大傢的場景的，如果場景類似，大傢也可以參考一下這個想法，有時候百度不能直接解決問題但是也能開發一下解決的思路！！！

到此這篇關於element表單校驗提示定位到元素位置的文章就介紹到這瞭,更多相關element表單提示定位元素內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet！

推薦閱讀：