va.js - Vue フォーム検証プラグインの作成プロセス

前書き

少し前に、上司が Vue 開発環境をセットアップしたため、私たちは喜んで JQ から Vue を使用するようになりました。この間、フォーム検証に満足していなかった私は、Vue のプラグインの章を見て、自分でも書けそうな気がしたので、フォーム検証プラグイン va.js を書き始めました。もちろん、プラグインを見つけてみませんか? vue バリデーター。

私が考えたのは、フォーム検証はさまざまな企業のニーズを考慮するために高度にカスタマイズされたものであり、オンラインで見つけたこの種のプラグインには必要のない機能がたくさん追加されているということです。 。 vue-validator は 50kb で、私が書いた va.js はわずか 6kb であることがわかりました。

もう 1 つは、vue-validator の API は非常に長いと思うということです。常に v-validate:username="['required']" という長いリストになっており、私が設計した呼び出しはおそらく次のようなものです。 -va :Money

もちろん、この記事では、会社のニーズを満たす vue フォーム検証プラグインの作成方法のみを示します。以下にアイデアを紹介します。

1. フォーム検証モジュールの構成

フォーム検証モジュールは、設定 - 検証 - エラー報告 - 値収集で構成されます。

設定: 設定ルールと設定エラーのレポート、および優先度

検証: 変更イベントでの検証、送信ボタンがクリックされたときの検証、そしてもちろん入力イベント値での検証もあります

Errorレポート: エラー報告方法は一般にポイントであり、エラー テキストにはテンプレートがあり、カスタマイズされたものもあります

値: 確認されたデータを開発者に返して電話してください

以下は、上司が私に行ったリクエストです。企業プロジェクト

一元管理検証ルールとエラー報告テンプレート。

エラー報告時間はオプションです

検証後の正しいデータはオブジェクトにパッケージ化されており、直接使用できます

各ページでルールをオーバーライドし、エラー報告情報をカスタマイズし、ajaxがデータを取得できるようにします。そして、 ルールが補足されました

不思議に思って聞いてみました、なぜそうなるのですか？すると上司は一つ一つ答えてくれました:

一元管理ルールとエラー報告テンプレートの利点は、ルールがグローバルに使用でき、一度に変更できることです。上司は私に、ニックネームの規則性を 3 回変更する必要があると言いました。こういう規則的なルールを各ページに書いていたらo(￣ヘ￣o#)ふむ、Nページ変更しなければならない

PCとモバイルの処理が違う PCでは変更イベントや入力イベントで多くの検証を行わなければなりません。検証とエラー報告。モバイルでは通常、検証のために送信ボタンに移動する必要があります。したがって、プラグインを作成するときは準備をしてください。次に、エラー報告に使用される UI は、現在使用しているレイヤー プラグインをサポートできなければなりません。もちろん、将来的にエラー UI が変更される可能性もありますので、ご了承ください。

もちろん、jq 時代には、パブリック フォーム検証で検証を完了し、すべてのデータを 1 つのオブジェクトに収集できます。このように、ajax を使用するときに値を取得する必要はありません。あなたのこのプラグインはこの効果を実現する予定です

jq のパブリック スクリプト、正規表現、エラー報告がすべて 1 か所に集中していることがわかり、これは多くの場所で非常に便利です。しかし、一部のページを変更する必要がある場合には、柔軟性が十分ではありません。 RealName などのルールは、最初にバックエンド インターフェイスのフィールド名を使用して、特定のページに対して設定されました。別の支払いページでは、バックエンド インターフェイスのフィールド名が PayUser に変更されていますが、正規表現は RealName のままであることがわかります。これは不便ではありませんが、見栄えは良くなります。もう 1 つの支払額には上限と下限があり、バックエンドから取得する必要があります。この状況も考慮する必要があります。ルールを変更したり、エラーレポートをカスタマイズしたりするには、各ページにある程度の柔軟性が必要です。

聞いてみると、前に書いたjqフォーム検証には違和感がたくさんあることが分かりました。 -_-|||次に、vue が私に与えてくれた良い点を見てみましょう。書いてみましょう

2 番目に、Vue プラグインの書き方

私は Vue 初心者ですが、なぜ Vue プラグインを書き始めたのでしょうか?というのも、解決策を考えていたときに Vue のドキュメントをめくってここにたどり着きました

va.js を書き終えたとき、あなたが書いたことは本当に明確だと感じたからです。

実際には、フォーム検証を完了するコマンドを書きたいのです。命令が 2 ～ 3 個ある可能性があり、各サブインスタンス内でルールを拡張できるようにいくつかのメソッドを Vue.prototype で定義する必要があることがわかりました。それで上司は、これはプラグインに相当すると言いました。これを見るとクジラになったような気分になります。

va.jsは主にVueコマンドを使用します

これら、va.jsを書き終えたときに、書いていることがとてもわかりやすくなったと感じました。

実際には、フォーム検証を完了するコマンドを書きたいと思っています。命令が 2 ～ 3 個ある可能性があり、各サブインスタンス内でルールを拡張できるようにいくつかのメソッドを Vue.prototype で定義する必要があることがわかりました。それで上司は、これはプラグインに相当すると言いました。これを見るとクジラになったような気分になります。

va.js は主に Vue の命令を使用します

Vue のドキュメントは非常に注意深く書かれていますが、もう 1 つ付け加えておきます
vnode.context は Vue のインスタンスです
プロジェクトを実行するとき、ルート コンポーネントにぶら下がっている N 個のサブコンポーネントであり、N 個のサブコンポーネントがサブコンポーネントにぶら下がっている可能性があります。 vnode.context によって取得されるインスタンスは、命令にバインドされたコンポーネントのインスタンスです。これは非常に便利です。たくさんのことができます

もちろん、Vue.prototypeも使用します

Vue.prototype.$methodは、各コンポーネントで呼び出すことができるメソッドです。コンポーネント内で this.$method を使用して呼び出すことができます