vue3怎么實現H5表單驗證組件

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

效果圖

描述

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

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

實現思路

核心api：使用 provide 和 inject ，對應<form>和<form-item>。

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

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

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

與element-ui表單組件差異

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

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

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

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

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

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

非uni-app平臺的移植

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

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

  return {
    /**
     * 添加事件
     * @param {string} name 事件名
     * @param {Function} fn 事件執行的函數
     */
    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 事件綁定的函數
     */
    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] => 沒有要解綁的事件");
      }
    },

    /**
     * 調用事件
     * @param {string} name 事件名
     * @param {any} params 事件攜帶參數
     */
    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] => 沒有要執行的事件");
      }
    },
  }
}

調用moduleEvent()之后，用變量調用即可，注意當前變量要作為內存常駐使用。

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