1. インストールと使用まず、Vue プロジェクトにインストールします。 npm インストール --save vue-input-check インストールが完了したら、以下をインポートして登録します。 'vue-input-check' から inputCheck をインポートします。 // Vue.use(inputCheck) をインストールします。 次に、次の形式で使用できます。 <フォームの自動補完="オフ" 検証なし> <input v-model='key' name='入力ボックス名' v-input-check='[key,"validate-express"]'/> <!-- 入力ボックスは必要な数だけ作成できます --> </フォーム> ご覧のとおり、上記の 検証エクスプレス="val1:param1:param2|val2|valu3:param1" 異なるルールは | で区切られ、パラメータを渡す必要があるルールのパラメータは : で区切られます。いくつかの例を見てみましょう。 v-input-check='[キー、"必須|最大長:10|正規表現:^\\d{1,5}$"]' v-input-check='[キー、"必須"]' 現在、次の組み込みルールが利用可能です。
2. 検証結果の取得ページ ルールを定義した後、検証結果を取得する方法は 2 つあります。 1.JS方式チェックを開始するには、次の方法を使用します。 this.$validateCheck(formnode、コールバック、エラーバック); このオブジェクトには 3 つのパラメータが含まれています。
さらに、エラー コールバックには、次のデータ形式のパラメーターがあります。 { "$el": 間違った入力ボックス ノード "$error": 現在の入力ボックスの最初のエラー メッセージ} 2. HTML方式このメソッドを提供する目的は、ページ上の現在のフォームの入力状態に関するリアルタイムのフィードバックを提供することです。 まず、フォーム上で、
3. カスタム検証ルールほとんどの場合、デフォルトのルールだけではすべてのビジネス状況に対応できないことが多いため、新しい検証ルールを追加する必要もあります。 Vue.use(inputCheck, { // カスタム検証ルール検証: [{ //ルール名: "XXX", // 検証メソッド。合法の場合は true を返し、違法の場合は false を返します。 // el と val を除き、この関数の残りのパラメータは使用時に ```:``` によって渡され、任意の数を指定できます。 // たとえば、 ``` required:true|phone:parm1:param2 ``` テスト: 関数 (el, val, ...) { true|false を返します。 }, // プロンプト情報が不正です。文字列メッセージを返す必要があります: function (el, name) { 「XXX」を返します。 } }, // 検証ルールは複数存在する可能性があります... ] }); これで、Vue でフォーム検証を実装する方法に関するこの記事は終了です。Vue でフォーム検証を実装する方法に関するより関連性の高いコンテンツについては、123WORDPRESS.COM で以前の記事を検索するか、次の関連記事を引き続き参照してください。今後も 123WORDPRESS.COM を応援していただければ幸いです。 以下もご興味があるかもしれません:
|
<<: MySQL の CPU 負荷が高い問題のトラブルシューティング
>>: Win10にnginxをインストールして設定するプロセス
この記事では、参考までにタイマーを実装するためのVueの具体的なコードを紹介します。具体的な内容は次...
現在の Linux システムが VMware にインストールされているかどうかを確認する方法を教えて...
サブスクリプションメッセージテンプレートを選択または作成するWeChat アプレットにログインし、「...
序文:先週の日曜日、先輩から3ページ作るのを手伝って欲しいと頼まれました。データのやり取りなどはなく...
目次序文Mysql の case when 構文:事例実践:要約:序文今日、プログラムを開発している...
1. cmakeをインストールする1. cmakeの圧縮パッケージを解凍する [root@mysql...
1. コマンドの紹介date コマンドは、現在の時刻または指定された時刻を指定された形式で表示するた...
Web Skills第5号では、CSSでダークモードやハイライトモードを実装するための技術的なソリュ...
この記事では、ネイティブ JS で実装された特殊効果メッセージ ボックスを紹介します。効果は次のとお...
何もすることがなかったので、学習用に最も安いAlibaba Cloudサーバーを購入しました。年間3...
JavaScriptで格納可能なセカンダリメニューを実装するための具体的なコードは参考までに。具体...
解決:リンクのターゲット属性値をターゲット フレームワーク名と同じに設定するだけです。具体的な手順:...
目次まず、双方向バインディングを実装するアイデアについて説明します。これらの機能を実装するための j...
実際のプロジェクトでは、複数のテーブル間に関係が存在します。 1 つのテーブル内のすべてのデータを取...
Alibaba Cloud yum コマンドでのデフォルトの MySQL バージョンは 5.17**...