需求來(lái)了

一般來(lái)說(shuō)，element-ui的表單是提供表單校驗(yàn)的，就是寫好只有，點(diǎn)擊提交如果不通過(guò)會(huì)有紅字提醒，如下圖：

因?yàn)槲覀冞@次的表單內(nèi)容比較多，是會(huì)有也沒(méi)滾動(dòng)的情況，產(chǎn)品要求我們點(diǎn)擊提交去校驗(yàn)的時(shí)候要

• 彈出第一個(gè)沒(méi)有通過(guò)校驗(yàn)的表單項(xiàng)的提示信息
• 并且滾到目標(biāo)窗口那里

既然把需求分隔成了兩個(gè)點(diǎn)就一個(gè)一個(gè)來(lái)解決！

彈出校驗(yàn)失敗的第一個(gè)信息

這個(gè)相對(duì)比較簡(jiǎn)單，因?yàn)閑lement的校驗(yàn)函數(shù)大家都用過(guò)，基本大家一般都只用第一個(gè)參數(shù)，就是是否校驗(yàn)通過(guò)，這次我們要用到他的第二個(gè)參數(shù)就是校驗(yàn)信息，會(huì)包括所有你的表單這次不通過(guò)校驗(yàn)的字段和提示文字，我們只需要取第一個(gè)即可，看代碼：

// 校驗(yàn)規(guī)則像下面這樣
const rules = {
  name: {required: true, message: '請(qǐng)輸入活動(dòng)名稱'},
  age: {required: true, message: '請(qǐng)輸入年齡'},
}

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

// message這個(gè)參數(shù)實(shí)際打印出來(lái)是這樣的（是一個(gè)對(duì)象）
// 1. 會(huì)根據(jù)你有多少個(gè)不通過(guò)校驗(yàn)的表單項(xiàng)就會(huì)多少個(gè)信息對(duì)象在里面
// 2. 信息對(duì)象會(huì)有兩個(gè)字段，一個(gè)是你的message提示文字，對(duì)應(yīng)你的規(guī)則的message，一個(gè)是
//    你這個(gè)規(guī)則對(duì)應(yīng)的字段
{
  name: { message: '請(qǐng)輸入活動(dòng)名稱', field: 'name' },
  age: { message: '請(qǐng)輸入年齡', field: 'name' },
}

滾到目標(biāo)窗口

錯(cuò)誤做法??

對(duì)于這個(gè)功能，我的第一個(gè)想法就是錨點(diǎn)的跳轉(zhuǎn)，那么相應(yīng)的你就要設(shè)置好錨點(diǎn)，我們看看一般做法

• 設(shè)置a標(biāo)簽的href屬性：<a href="#test"></a>
• 設(shè)置目標(biāo)標(biāo)簽的id屬性：<el-input id="test" />

那就是你要給所有的目標(biāo)跳轉(zhuǎn)點(diǎn)設(shè)置上對(duì)應(yīng)的屬性，然后通過(guò)校驗(yàn)函數(shù)拿到屬性名，可是上面我們剛剛演示了，拿到校驗(yàn)信息的第二個(gè)參數(shù)，里面只有校驗(yàn)規(guī)則的字段和具體提示文字，也就是說(shuō)你只能用校驗(yàn)規(guī)則的字段來(lái)作為錨點(diǎn)的屬性：

• 也就是如果你的校驗(yàn)規(guī)則是const rules = { name: { required: true, message: '請(qǐng)輸入姓名！' } };
• 那么能拿到的也只有name這個(gè)屬性名字，拿到這個(gè)屬性再設(shè)置一個(gè)a標(biāo)簽做跳轉(zhuǎn)

但是但是：由于我的表單內(nèi)容很多，里面也寫個(gè)各種根據(jù)業(yè)務(wù)分散了表單項(xiàng)的組件，所以我的rules實(shí)際是分散的，不是一個(gè)rules對(duì)象而已

• 就會(huì)造成了屬性名重名
• 再者我有200多個(gè)表單項(xiàng)目，寫那么多把我手給寫殘廢

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

正確做法??

接著我也百度了很多方法，基本的思想，也是根據(jù)屬性綁定給你要跳轉(zhuǎn)的標(biāo)簽，然后在校驗(yàn)函數(shù)獲取到屬性名再設(shè)置各種方法跳轉(zhuǎn)到目標(biāo)標(biāo)簽的位置，都不是我理想的方法，要么不適用，要么適用的代碼量太大，查找的過(guò)程之中我發(fā)現(xiàn)了一個(gè)不錯(cuò)的讓視窗跳轉(zhuǎn)到指定的標(biāo)簽的函數(shù)給了我一個(gè)啟發(fā)，先看看函數(shù)：

// 該scrollIntoView()方法將調(diào)用它的元素滾動(dòng)到瀏覽器窗口的可見(jiàn)區(qū)域。
// el: 就是你的視窗要跳轉(zhuǎn)去的目標(biāo)元素
// block：'center': 垂直中間對(duì)齊
// behavior: 'smooth': 過(guò)渡動(dòng)畫絲滑滾動(dòng)
el.scrollIntoView({ block: 'center', behavior: 'smooth' });

// 關(guān)于這個(gè)函數(shù)完整的文檔這這里
// https://developer.mozilla.org/zh-CN/docs/Web/API/Element/scrollIntoView

就是上面這個(gè)函數(shù)，我可以很簡(jiǎn)單的直接跳轉(zhuǎn)到目標(biāo)標(biāo)簽，那我們的目標(biāo)標(biāo)簽是什么，出現(xiàn)紅字沒(méi)有通過(guò)校驗(yàn)的表單項(xiàng)？不對(duì)，我們的目標(biāo)標(biāo)簽是出現(xiàn)紅字的標(biāo)簽，也就是：

(標(biāo)出藍(lán)色框)

既然每個(gè)不通過(guò)校驗(yàn)的都會(huì)報(bào)紅字提示，那么每個(gè)的紅字提示標(biāo)簽肯定一樣的，我們來(lái)看看

（瀏覽器檢查元素）

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

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

果然，我們證實(shí)了每個(gè)沒(méi)通過(guò)校驗(yàn)的元素都會(huì)有這個(gè)標(biāo)簽出現(xiàn)，那么我們只需要獲取這個(gè)提示標(biāo)簽的第一個(gè)，然后用視窗跳轉(zhuǎn)函數(shù)跳轉(zhuǎn)過(guò)去即可，這樣不會(huì)有屬性名的問(wèn)題，代碼量也很小：

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

// 在vue實(shí)際開(kāi)中你把這個(gè)代碼寫在element提供的表單校驗(yàn)函數(shù)中會(huì)有點(diǎn)問(wèn)題，會(huì)拿不到導(dǎo)致報(bào)錯(cuò)
// el-form-item__error元素，所以要用一個(gè)$nextTick方法，如下
this.$nextClick(() => {
  const el = document.querySelectorAll('.el-form-item__error')[0];
  el.scrollIntoView({ block: 'center', behavior: 'smooth' });
});

就這樣相對(duì)簡(jiǎn)單的完成了需求，但是還是要看大家的場(chǎng)景的，如果場(chǎng)景類似，大家也可以參考一下這個(gè)想法，有時(shí)候百度不能直接解決問(wèn)題但是也能開(kāi)發(fā)一下解決的思路?。。?/p>

到此這篇關(guān)于element表單校驗(yàn)提示定位到元素位置的文章就介紹到這了,更多相關(guān)element表單提示定位元素內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評(píng)論