效果圖

描述

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

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

功能預(yù)覽

代碼地址 vue2

實(shí)現(xiàn)思路

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

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

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

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

與element-ui表單組件差異

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

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

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

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

• 不知道大家在以往的長(zhǎng)表單驗(yàn)證中，有沒(méi)有遇到過(guò)點(diǎn)擊驗(yàn)證之后，因?yàn)轫?yè)面過(guò)長(zhǎng)，所以不知道那個(gè)表單項(xiàng)校驗(yàn)不通過(guò)，從而需要翻閱定位到對(duì)應(yīng)項(xiàng)；為了優(yōu)化以往表單驗(yàn)證的體驗(yàn)，這里加入了驗(yàn)證之后，滾動(dòng)到對(duì)應(yīng)位置的操作，更加符合移動(dòng)端的用戶體驗(yàn)。

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

非uni-app平臺(tái)的移植

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

function moduleEvent() {
  /** 
  * 事件集合對(duì)象
  * @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] => 沒(méi)有要解綁的事件");
      }
    },

    /**
     * 調(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] => 沒(méi)有要執(zhí)行的事件");
      }
    },
  }
}

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

到此這篇關(guān)于vue3實(shí)現(xiàn)H5表單驗(yàn)證組件的示例的文章就介紹到這了,更多相關(guān)vue3 H5表單驗(yàn)證組件內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評(píng)論