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

element表單校驗(yàn)提示定位到元素位置

 更新時(shí)間:2022年08月01日 15:54:50   作者:不會(huì)打代碼  
本文主要介紹了element表單校驗(yàn)提示定位到元素位置,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧

需求來了

一般來說,element-ui的表單是提供表單校驗(yàn)的,就是寫好只有,點(diǎn)擊提交如果不通過會(huì)有紅字提醒,如下圖:

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

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

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

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

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

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

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

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

滾到目標(biāo)窗口

錯(cuò)誤做法??

對于這個(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è)置上對應(yīng)的屬性,然后通過校驗(yàn)函數(shù)拿到屬性名,可是上面我們剛剛演示了,拿到校驗(yàn)信息的第二個(gè)參數(shù),里面只有校驗(yàn)規(guī)則的字段和具體提示文字,也就是說你只能用校驗(yàn)規(guī)則的字段來作為錨點(diǎn)的屬性:

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

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

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

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

正確做法??

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

// 該scrollIntoView()方法將調(diào)用它的元素滾動(dòng)到瀏覽器窗口的可見區(qū)域。
// el: 就是你的視窗要跳轉(zhuǎn)去的目標(biāo)元素
// block:'center': 垂直中間對齊
// behavior: 'smooth': 過渡動(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ù),我可以很簡單的直接跳轉(zhuǎn)到目標(biāo)標(biāo)簽,那我們的目標(biāo)標(biāo)簽是什么,出現(xiàn)紅字沒有通過校驗(yàn)的表單項(xiàng)?不對,我們的目標(biāo)標(biāo)簽是出現(xiàn)紅字的標(biāo)簽,也就是:

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

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

(瀏覽器檢查元素)

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

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

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

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

// 在vue實(shí)際開中你把這個(gè)代碼寫在element提供的表單校驗(yàn)函數(shù)中會(huì)有點(diǎ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' });
});

就這樣相對簡單的完成了需求,但是還是要看大家的場景的,如果場景類似,大家也可以參考一下這個(gè)想法,有時(shí)候百度不能直接解決問題但是也能開發(fā)一下解決的思路?。?!

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

相關(guān)文章

  • vue3-vite安裝后main.ts文件和tsconfig.app.json文件報(bào)錯(cuò)解決辦法

    vue3-vite安裝后main.ts文件和tsconfig.app.json文件報(bào)錯(cuò)解決辦法

    Vue.js是一個(gè)流行的JavaScript框架,它可以幫助開發(fā)者構(gòu)建交互式Web應(yīng)用程序,這篇文章主要給大家介紹了關(guān)于vue3-vite安裝后main.ts文件和tsconfig.app.json文件報(bào)錯(cuò)解決辦法,需要的朋友可以參考下
    2023-12-12
  • Vue-Element-Admin集成自己的接口實(shí)現(xiàn)登錄跳轉(zhuǎn)

    Vue-Element-Admin集成自己的接口實(shí)現(xiàn)登錄跳轉(zhuǎn)

    關(guān)于這個(gè)Vue-element-admin中的流程可能對于新的同學(xué)不是很友好,所以本文將結(jié)合實(shí)例代碼,介紹Vue-Element-Admin集成自己的接口實(shí)現(xiàn)登錄跳轉(zhuǎn),感興趣的小伙伴們可以參考一下
    2021-06-06
  • vue+el-upload實(shí)現(xiàn)多文件動(dòng)態(tài)上傳

    vue+el-upload實(shí)現(xiàn)多文件動(dòng)態(tài)上傳

    這篇文章主要為大家詳細(xì)介紹了vue+el-upload實(shí)現(xiàn)多文件動(dòng)態(tài)上傳,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下
    2021-10-10
  • ElementUI中el-table表格組件如何自定義表頭

    ElementUI中el-table表格組件如何自定義表頭

    最近需要做一個(gè)el-table的表格,表頭需要顯示提示信息,本文主要介紹了ElementUI中el-table表格組件如何自定義表頭,具有一定的參考價(jià)值,感興趣的可以了解一下
    2023-09-09
  • Vue插槽簡介和使用示例詳解

    Vue插槽簡介和使用示例詳解

    插槽就是子組件中的提供給父組件使用的一個(gè)占位符,用<slot></slot>?表示,父組件可以在這個(gè)占位符中填充任何模板代碼,如?HTML、組件等,填充的內(nèi)容會(huì)替換子組件的<slot></slot>標(biāo)簽,這篇文章主要介紹了Vue插槽的理解和使用,需要的朋友可以參考下
    2023-03-03
  • Electron + vue 打包桌面操作流程詳解

    Electron + vue 打包桌面操作流程詳解

    這篇文章主要介紹了Electron + vue 打包桌面操作流程,本文給大家介紹的非常詳細(xì),具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
    2019-06-06
  • Vue3?企業(yè)級組件庫框架搭建?pnpm?monorepo實(shí)戰(zhàn)示例

    Vue3?企業(yè)級組件庫框架搭建?pnpm?monorepo實(shí)戰(zhàn)示例

    這篇文章主要為大家介紹了Vue3?企業(yè)級組件庫框架搭建?pnpm?monorepo實(shí)戰(zhàn)示例,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪
    2022-11-11
  • 解決Vue.js父組件$on無法監(jiān)聽子組件$emit觸發(fā)事件的問題

    解決Vue.js父組件$on無法監(jiān)聽子組件$emit觸發(fā)事件的問題

    今天小編就為大家分享一篇解決Vue.js父組件$on無法監(jiān)聽子組件$emit觸發(fā)事件的問題,具有很好的參考價(jià)值,希望對大家有所幫助。一起跟隨小編過來看看吧
    2018-09-09
  • vue實(shí)現(xiàn)登錄時(shí)的圖片驗(yàn)證碼

    vue實(shí)現(xiàn)登錄時(shí)的圖片驗(yàn)證碼

    這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)登錄時(shí)的圖片驗(yàn)證碼,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下
    2021-04-04
  • Vue3使用JSX的方法實(shí)例(筆記自用)

    Vue3使用JSX的方法實(shí)例(筆記自用)

    以前我們經(jīng)常在react中使用jsx,現(xiàn)在我們在vue中也是用jsx,下面這篇文章主要給大家介紹了關(guān)于Vue3使用JSX的相關(guān)資料,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下
    2023-02-02

最新評論