vue3怎麼實作H5表單驗證元件

效果圖

描述

基於vue.js，不依賴其他外掛程式或函式庫實作；基礎功能使用保持和element-ui 一致，內部實作做了一些行動端差異的調整。

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

實作想法

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

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

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

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

與element-ui表單元件差異

• #表單驗證不再設定輸入框和任何表單表單的樣式，而是透過自訂修改樣式去顯示驗證提示；這十分有利於行動端窮出不盡的UI設計稿的變化，例如同一個表單，有兩種不同樣式的輸入框；同時不影響和其他樣式庫的使用，因為表單驗證的<form-item></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表單驗證元件的詳細內容。更多資訊請關注PHP中文網其他相關文章！