element表單校驗提示定位到元素位置
需求來了
一般來說,element-ui的表單是提供表單校驗的,就是寫好只有,點擊提交如果不通過會有紅字提醒,如下圖:
因為我們這次的表單內(nèi)容比較多,是會有也沒滾動的情況,產(chǎn)品要求我們點擊提交去校驗的時候要
- 彈出第一個沒有通過校驗的表單項的提示信息
- 并且滾到目標窗口那里
既然把需求分隔成了兩個點就一個一個來解決!
彈出校驗失敗的第一個信息
這個相對比較簡單,因為element的校驗函數(shù)大家都用過,基本大家一般都只用第一個參數(shù),就是是否校驗通過,這次我們要用到他的第二個參數(shù)就是校驗信息,會包括所有你的表單這次不通過校驗的字段和提示文字,我們只需要取第一個即可,看代碼:
// 校驗規(guī)則像下面這樣 const rules = { name: {required: true, message: '請輸入活動名稱'}, age: {required: true, message: '請輸入年齡'}, } // 校驗函數(shù) // 重點是者第二個參數(shù) message this.$refs.formName.validate((valid, message) => { if (valid) { // 如果校驗通過則提交 alert('submit!'); } else { // 校驗不通過 // 取第一個不通過的信息對象提示即可 this.$message.error(message[Object.keys(message)[0]].message); return false; } }); // message這個參數(shù)實際打印出來是這樣的(是一個對象) // 1. 會根據(jù)你有多少個不通過校驗的表單項就會多少個信息對象在里面 // 2. 信息對象會有兩個字段,一個是你的message提示文字,對應(yīng)你的規(guī)則的message,一個是 // 你這個規(guī)則對應(yīng)的字段 { name: { message: '請輸入活動名稱', field: 'name' }, age: { message: '請輸入年齡', field: 'name' }, }
滾到目標窗口
錯誤做法??
對于這個功能,我的第一個想法就是錨點的跳轉(zhuǎn),那么相應(yīng)的你就要設(shè)置好錨點,我們看看一般做法
- 設(shè)置a標簽的href屬性:
<a href="#test"></a>
- 設(shè)置目標標簽的id屬性:
<el-input id="test" />
那就是你要給所有的目標跳轉(zhuǎn)點設(shè)置上對應(yīng)的屬性,然后通過校驗函數(shù)拿到屬性名,可是上面我們剛剛演示了,拿到校驗信息的第二個參數(shù),里面只有校驗規(guī)則的字段和具體提示文字,也就是說你只能用校驗規(guī)則的字段來作為錨點的屬性:
- 也就是如果你的校驗規(guī)則是
const rules = { name: { required: true, message: '請輸入姓名!' } };
- 那么能拿到的也只有
name
這個屬性名字,拿到這個屬性再設(shè)置一個a標簽做跳轉(zhuǎn)
但是但是:由于我的表單內(nèi)容很多,里面也寫個各種根據(jù)業(yè)務(wù)分散了表單項的組件,所以我的rules實際是分散的,不是一個rules對象而已
- 就會造成了屬性名重名
- 再者我有200多個表單項目,寫那么多把我手給寫殘廢
所以上述方案暫不適用于我!
正確做法??
接著我也百度了很多方法,基本的思想,也是根據(jù)屬性綁定給你要跳轉(zhuǎn)的標簽,然后在校驗函數(shù)獲取到屬性名再設(shè)置各種方法跳轉(zhuǎn)到目標標簽的位置,都不是我理想的方法,要么不適用,要么適用的代碼量太大,查找的過程之中我發(fā)現(xiàn)了一個不錯的讓視窗跳轉(zhuǎn)到指定的標簽的函數(shù)給了我一個啟發(fā),先看看函數(shù):
// 該scrollIntoView()方法將調(diào)用它的元素滾動到瀏覽器窗口的可見區(qū)域。 // el: 就是你的視窗要跳轉(zhuǎn)去的目標元素 // block:'center': 垂直中間對齊 // behavior: 'smooth': 過渡動畫絲滑滾動 el.scrollIntoView({ block: 'center', behavior: 'smooth' }); // 關(guān)于這個函數(shù)完整的文檔這這里 // https://developer.mozilla.org/zh-CN/docs/Web/API/Element/scrollIntoView
就是上面這個函數(shù),我可以很簡單的直接跳轉(zhuǎn)到目標標簽,那我們的目標標簽是什么,出現(xiàn)紅字沒有通過校驗的表單項?不對,我們的目標標簽是出現(xiàn)紅字的標簽,也就是:
(標出藍色框)
既然每個不通過校驗的都會報紅字提示,那么每個的紅字提示標簽肯定一樣的,我們來看看
(瀏覽器檢查元素)
el-form-item__error這個類名,讓我們看看是不是有很多個:
(打印el-form-item__error的元素標簽)
果然,我們證實了每個沒通過校驗的元素都會有這個標簽出現(xiàn),那么我們只需要獲取這個提示標簽的第一個,然后用視窗跳轉(zhuǎn)函數(shù)跳轉(zhuǎn)過去即可,這樣不會有屬性名的問題,代碼量也很?。?/p>
const el = document.querySelectorAll('.el-form-item__error')[0]; el.scrollIntoView({ block: 'center', behavior: 'smooth' }); // 在vue實際開中你把這個代碼寫在element提供的表單校驗函數(shù)中會有點問題,會拿不到導(dǎo)致報錯 // el-form-item__error元素,所以要用一個$nextTick方法,如下 this.$nextClick(() => { const el = document.querySelectorAll('.el-form-item__error')[0]; el.scrollIntoView({ block: 'center', behavior: 'smooth' }); });
就這樣相對簡單的完成了需求,但是還是要看大家的場景的,如果場景類似,大家也可以參考一下這個想法,有時候百度不能直接解決問題但是也能開發(fā)一下解決的思路?。?!
到此這篇關(guān)于element表單校驗提示定位到元素位置的文章就介紹到這了,更多相關(guān)element表單提示定位元素內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
vue3-vite安裝后main.ts文件和tsconfig.app.json文件報錯解決辦法
Vue.js是一個流行的JavaScript框架,它可以幫助開發(fā)者構(gòu)建交互式Web應(yīng)用程序,這篇文章主要給大家介紹了關(guān)于vue3-vite安裝后main.ts文件和tsconfig.app.json文件報錯解決辦法,需要的朋友可以參考下2023-12-12Vue-Element-Admin集成自己的接口實現(xiàn)登錄跳轉(zhuǎn)
關(guān)于這個Vue-element-admin中的流程可能對于新的同學(xué)不是很友好,所以本文將結(jié)合實例代碼,介紹Vue-Element-Admin集成自己的接口實現(xiàn)登錄跳轉(zhuǎn),感興趣的小伙伴們可以參考一下2021-06-06vue+el-upload實現(xiàn)多文件動態(tài)上傳
這篇文章主要為大家詳細介紹了vue+el-upload實現(xiàn)多文件動態(tài)上傳,文中示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下2021-10-10Vue3?企業(yè)級組件庫框架搭建?pnpm?monorepo實戰(zhàn)示例
這篇文章主要為大家介紹了Vue3?企業(yè)級組件庫框架搭建?pnpm?monorepo實戰(zhàn)示例,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪2022-11-11解決Vue.js父組件$on無法監(jiān)聽子組件$emit觸發(fā)事件的問題
今天小編就為大家分享一篇解決Vue.js父組件$on無法監(jiān)聽子組件$emit觸發(fā)事件的問題,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09