vue3怎么實現(xiàn)H5表單驗證組件

這篇文章主要講解了“vue3怎么實現(xiàn)H5表單驗證組件”，文中的講解內(nèi)容簡單清晰，易于學(xué)習(xí)與理解，下面請大家跟著小編的思路慢慢深入，一起來研究和學(xué)習(xí)“vue3怎么實現(xiàn)H5表單驗證組件”吧！

效果圖

描述

基于vue.js，不依賴其他插件或庫實現(xiàn)；基礎(chǔ)功能使用保持和 element-ui 一致，內(nèi)部實現(xiàn)做了一些移動端差異的調(diào)整。

當(dāng)前構(gòu)建平臺使用 uni-app 官方腳手架構(gòu)建，因為當(dāng)下移動端大多情況就h6和微信小程序兩種，所以一套代碼跑多端十分適合技術(shù)選型。

實現(xiàn)思路

核心api：使用 provide 和 inject ，對應(yīng)<form>和<form-item>。

• 在<form>組件中，內(nèi)部用一個變量（數(shù)組）去將所有<form-item>實例儲存起來，同時把要傳遞的數(shù)據(jù)通過provide暴露出去；<form-item>組件則在內(nèi)部用inject去接收父組件提供過來的數(shù)據(jù)，最后把自身的屬性和方法提交到父組件去。

• <form>中要做的事情就只有監(jiān)聽綁定的數(shù)據(jù)，然后做調(diào)用對應(yīng)<form-item>的各種驗證方法；所以任何的驗證狀態(tài)都寫在了<form-item>中，包括樣式的展示；由于可以拿到父組件綁定的數(shù)據(jù)，對于一些常見樣式設(shè)置自然就可以用computed去優(yōu)先拿取自身組件prop值或者父組件綁定的prop值；對應(yīng)的，通過父組件綁定的表單數(shù)據(jù)，就可以和自身prop去驗證當(dāng)前項了，最后由父組件去調(diào)用對應(yīng)方法即可，當(dāng)然，自身組件也可以調(diào)用。

• 因為vue3中移除了自定義派發(fā)事件$on、$off、$emit，所以這里改用uni.$on、uni.$off和uni.$emit來代替；不同的是，這個事件派發(fā)機(jī)制是全局的，不是跟隨組件唯一性，所以在添加、移除事件時，需要在事件名稱設(shè)置一個唯一值使用；這里我在<form>組件中定義一個變量，每次調(diào)用時都累加1，然后設(shè)為事件名稱再傳遞到<form-item>內(nèi)部，這樣就可以保證<form>和<form-item>的確定性了。

與element-ui表單組件差異

• 表單驗證不再設(shè)置輸入框和任何表單表單的樣式，而是通過自定義修改樣式去顯示驗證提示；這十分有利于移動端窮出不盡的UI設(shè)計稿的變化，例如同一個表單，有兩種不同樣式的輸入框；同時不影響和其他樣式庫的使用，因為表單驗證的<form-item>不會影響到插槽內(nèi)的任何元素。

• 表單校驗數(shù)據(jù)選項只保留4個字段（見下面），因為移除了對表單組件的驗證狀態(tài)，所以trigger這個事件設(shè)置也不需要了；pattern則換成了reg，注意的是，在微信小程序中，任何組件的傳參都會被過濾剩下基礎(chǔ)json類型，所以這個reg在小程序環(huán)境中使用時，要在末尾加上.toString()，validator同理。

/** 表單規(guī)則類型 */
export interface TheFormRulesItem {
  /** 是否必填項 */
  required?: boolean
  /** 提示字段 */
  message?: string
  /** 指定類型 */
  type?: "number" | "array"
  /**
   * 自定義的校驗規(guī)則（正則）
   * - 考慮到微信一些特殊的抽風(fēng)機(jī)制，在微信小程序中，除`number|string|object|undefined|null`這幾個基礎(chǔ)類型外，其他類型是會被過濾掉，所以這里在寫正則的時候，在末尾加上`.toString()`即可
   */
  reg?: string // | RegExp
}

/** 表單規(guī)則類型 */
export type TheFormRules = { [key: string]: Array<TheFormRulesItem> };

• 不知道大家在以往的長表單驗證中，有沒有遇到過點擊驗證之后，因為頁面過長，所以不知道那個表單項校驗不通過，從而需要翻閱定位到對應(yīng)項；為了優(yōu)化以往表單驗證的體驗，這里加入了驗證之后，滾動到對應(yīng)位置的操作，更加符合移動端的用戶體驗。

• 表單驗證的觸發(fā)機(jī)制：都知道element-ui的觸發(fā)機(jī)制是通過指定trigger來選擇觸發(fā)的時機(jī)，那這里我去掉之后，就意味著沒有這些操作去觸發(fā)了；而我選擇的是主動調(diào)用validate、validateField這些驗證方法時去觸發(fā)實時驗證，當(dāng)驗證不通過時，把不通過的用變量儲存起來，然后每次數(shù)據(jù)變動時去校驗，等到驗證通過了，則移除實時驗證項；這樣相比于element-ui綁定事件實時去驗證會節(jié)省很多代碼調(diào)用和運(yùn)行的機(jī)制，同時代碼可以做到更高校和精簡。

非uni-app平臺的移植

除了更換標(biāo)簽之外，幾乎不用做任何的修改就可以復(fù)制粘貼到其他項目中去，唯一要修改的就是自定義事件uni.$on、uni.$off和uni.$emit；這里可以自己實現(xiàn)，又或者用其他庫去代替，js實現(xiàn)自定義事件派發(fā)代碼如下：

function moduleEvent() {
  /** 
  * 事件集合對象
  * @type {{[key: string]: Array<Function>}}
  */
  const eventInfo = {};

  return {
    /**
     * 添加事件
     * @param {string} name 事件名
     * @param {Function} fn 事件執(zhí)行的函數(shù)
     */
    on(name, fn) {
      if (!eventInfo.hasOwnProperty(name)) {
        eventInfo[name] = [];
      }
      if (!eventInfo[name].some(item => item === fn)) {
        eventInfo[name].push(fn);
      }
    },

    /**
     * 解綁事件
     * @param {string} name 事件名
     * @param {Function} fn 事件綁定的函數(shù)
     */
    off(name, fn) {
      const fns = eventInfo[name];
      if (fns && fns.length > 0 && fn) {
        for (let i = 0; i < fns.length; i++) {
          const item = fns[i];
          if (item === fn) {
            fns.splice(i, 1);
            break;
          }
        }
      } else {
        console.log("[moduleEvent] => 沒有要解綁的事件");
      }
    },

    /**
     * 調(diào)用事件
     * @param {string} name 事件名
     * @param {any} params 事件攜帶參數(shù)
     */
    dispatch(name, params) {
      const fns = eventInfo[name];
      if (fns && fns.length > 0) {
        for (let i = 0; i < fns.length; i++) {
          const fn = fns[i];
          fn(params);
        }
      } else {
        console.log("[moduleEvent] => 沒有要執(zhí)行的事件");
      }
    },
  }
}

調(diào)用moduleEvent()之后，用變量調(diào)用即可，注意當(dāng)前變量要作為內(nèi)存常駐使用。

感謝各位的閱讀，以上就是“vue3怎么實現(xiàn)H5表單驗證組件”的內(nèi)容了，經(jīng)過本文的學(xué)習(xí)后，相信大家對vue3怎么實現(xiàn)H5表單驗證組件這一問題有了更深刻的體會，具體使用情況還需要大家實踐驗證。這里是億速云，小編將為大家推送更多相關(guān)知識點的文章，歡迎關(guān)注！