vue3 で H5 フォーム検証コンポーネントを実装する方法-Vue.js-php.cn

vue3 で H5 フォーム検証コンポーネントを実装する方法

WBOY

リリース： 2023-06-03 14:09:14

転載

1229 人が閲覧しました

レンダリング

vue3 で H5 フォーム検証コンポーネントを実装する方法

説明

vue.jsに基づいており、他のプラグインやライブラリに依存せず、基本的なものです。機能は維持されています。 element-ui と一貫して、モバイルの違いに合わせていくつかの内部実装調整が行われています。

現在の構築プラットフォームは uni-app 公式スキャフォールディングを使用して構築されています。現在のモバイル端末のほとんどは h6 と WeChat アプレット であるため、1 つのコードセットが必要です複数の端末で動作できるため、技術的な選択に非常に適しています。

実装アイデア

Core api: <form></form> および <form-item> に対応する、provide と inject を使用します。＃＃＃。 </form-item>

コンポーネントでは、すべての インスタンスを格納するために変数 (配列) が内部的に使用されます。同時に、転送されるデータは provide を通じて公開されます。 コンポーネントは、内部で inject を使用して、によって提供されたデータを受け取ります。親コンポーネントのデータを取得し、最後に独自のプロパティとメソッドを親コンポーネントに送信します。
必要なのは、バインドされたデータをリッスンして、対応する <form-item>## を呼び出すことだけです。 # のさまざまな検証メソッド; そのため、スタイルの表示を含むあらゆる検証ステータスは </form-item> に記述されます; 一部の一般的なスタイルについては、親コンポーネントにバインドされたデータが取得できるため、当然のことながらcomputed を使用して、独自のコンポーネントの prop 値、または親コンポーネントによってバインドされた prop 値、つまり親によってバインドされた値を取得できます。コンポーネントフォームデータを使用して、独自の prop で現在の項目を確認できます。最後に、親コンポーネントは対応するメソッドを呼び出すことができます。もちろん、独自のコンポーネントからも呼び出すことができます。
カスタムディスパッチイベント
、
$off、$ が vue3 のエミットから削除されたため、したがって、uni.$on、uni.$off、および uni.$emit が代わりに使用されます。違いは、このイベントがディスパッチメカニズムであることです。はグローバルであり、コンポーネントの一意性に従いません。そのため、イベントを追加または削除するときは、イベント名に一意の値を設定する必要があります。ここでは、

コンポーネントに変数を定義します。呼び出されるたびに、1 が蓄積され、イベント名として設定され、内部的に に渡されます。これにより、 が確実に実行されます。 そして の確実性。 element-ui フォームコンポーネントとの違い

フォーム検証では、入力ボックスやフォームフォームのスタイルは設定されなくなりましたが、カスタマイズによって設定されます。検証プロンプトを表示するようにスタイルを変更します。これは、同じフォームに 2 つの異なるスタイルの入力ボックスがあるなど、モバイル端末での無限の

変更に非常に役立ちます。フォーム検証
はスロット内のどの要素にも影響を与えないため、他のスタイルのライブラリの使用には影響しません。
フォーム検証データオプションは、
フィールドのみを保持します (以下を参照)。フォームコンポーネントの検証状態が削除されるため、
triggerこのイベント設定は不要になりました; pattern は reg に置き換えられます。WeChat アプレットでは、コンポーネントによって渡されたパラメータはフィルタリングされ、基本はそのまま残されることに注意してください。 json 型なので、この reg をミニプログラム環境で使用する場合は、最後に .toString() を追加する必要があります (validator##)。＃も同じ理由です。 <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:js;">/** 表单规则类型 */ 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> };</pre><div class="contentsignin">ログイン後にコピー</div></div>

フォーム検証のトリガーメカニズム:
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 中国語 Web サイトの他の関連記事を参照してください。