🌈 Ant Designを使用したカスタムベリファイアの作成

Vue2

AntDv 1.7.8

📋 Anddデフォルトvalidator rules

antdは、デフォルトで簡単に使用できるベリファイアを提供します.

Vue.jsでは上記のように属性値を与えて使用できます
antdが提供するデフォルトのタイプは次のとおりです.

✏️ Type

type = "email"

¥¥¥という形で属性値を入力すると、入力時にすぐに有効性チェックが行われます(非常に便利…!)

💫 Custom Validator

次に、組み込まれたvalidatorのほか、カスタムvalidatorも作成します.
IPアドレスを検証する場合

regexpの使用

regexpプロパティはで使用できますが、正規表現が長すぎるとコードが醜くなります
だからvalidator APIを使いたい

▼▼▼validatorを使う

まず関数を接続する

関数の形式は次のとおりです.

(ここで、IPValidは通常の正規表現であり、正規表現に合致する場合はtrueを返します)

コンソールをクリックするとこのようなパラメータ情報が表示されます

rule:ベリファイアのルールを作成するオブジェクト情報

value:inputの値

callback:callback関数は、パラメータにスペースを入力して実行し、文字列を入れても通過しないと判断します.
コンソールでは、このcallback関数でパラメータとしての文字列は警告としてマークされますが、production modeでは現れないので心配ありません

にこにこ...

📋 装飾検証フォーム

has-feedbackまたはallow-sclearオプションを追加して飾ることもできます

has-feedback:フォーム右端の円でチェックし、エラー

を表示

allow-clear:clearボタン

を表示