1. インストールnpm と [email protected] 2. インポート'vee-validate' から { フォーム、フィールド } をインポートします。 3. 検証ルールを定義します(エクスポート用に js ファイルを utils フォルダに別途パッケージ化するのが最善です)// エクスポート用のjsファイルを作成する export default { // アイテムアカウントを確認する アカウント(値) { if (!value) return 'cannot be empty' // 条件判断、 true を返す // 最後に、渡されたすべてのものは true を返す必要があります }, パスワード (値) { if (!value) return 'パスワードを入力してください' if (!/^\w{6,24}$/.test(value)) return 'パスワードは6〜24文字です' 真を返す }, モバイル(値){ if (!value) return '電話番号を入力してください' if (!/^1[3-9]\d{9}$/.test(value)) return '電話番号の形式が正しくありません' 真を返す }, コード (値) { if (!value) return '認証コードを入力してください' if (!/^\d{6}$/.test(value)) return '認証コードは6桁です' 真を返す }, isAgree (値) { if (!value) return 'ユーザー契約に同意するにはチェックを入れてください' 真を返す } } 4. フォームコンポーネントを使用して検証ルールとエラーオブジェクトを設定します(フォームとフィールドは両方ともプラグインからオンデマンドでエクスポートされます)// validation-schema="mySchema" は検証ルールを設定します // v-slot: エラーオブジェクトをエクスポートします <Form :validation-schema="mySchema" v-slot="{エラー}" > <!-- フォーム要素 --> </フォーム> <スクリプト> '@/utils/vee-validate-schema' からスキーマをインポートします 設定 () { // フォームオブジェクトデータ const form = reactive({ account: null, // アカウント password: null // パスワード }) // 検証ルールオブジェクト const mySchema = { アカウント: schema.account、 パスワード: schema.password } { フォーム、mySchema } を返します } </スクリプト> 5. フィールドコンポーネントを使用してフォーム項目の検証を追加する//1. 入力を `Field` コンポーネントに変更します。これはデフォルトで入力として解析されます。 //2. `Field` は、スキーマ内のどの検証ルールを使用するかを指定するための name 属性を追加します //3. `Field` は、フォームデータの双方向バインディングを提供するために v-model を追加します //4. フォーム検証エラーが発生すると、エラークラス名 `error` が表示され、赤い枠線の <Field が表示されます v-model="フォーム.アカウント" 名前="アカウント" タイプ="テキスト" placeholder="ユーザー名を入力してください" :class="{ error: errors.account }" // エラーメッセージが返された場合、クラスエラーを表示するかどうかはtrueです /> <!-- <input type="text" placeholder="ユーザー名を入力してください" /> --> 6. フォームデータと検証ルールデータを補足する// フォームにバインドされたデータ const form = reactive({ account: null, // アカウント password: null, // パスワード isAgree: true // 選択されているかどうか}) // 現在のフォームに必要な検証データルールを宣言します const curSchema = reactive({ アカウント: schema.account, // アカウント パスワード: schema.password, // パスワード isAgree: schema.isAgree // 選択されているかどうか}) 上記は、Vue vee-validateプラグインの簡単な使用方法の詳細内容です。Vue vee-validateプラグインの詳細については、123WORDPRESS.COMの他の関連記事に注目してください。 以下もご興味があるかもしれません:
|
>>: web.config (IIS) および .htaccess (Apache) の構成
シナリオ 1: HTML: <div class="outer"> ...
目次1 システムの紹介2 システムショートカット3 一般的なシステムコマンド1 システムの紹介 1....
目次目的npm init および package.json ファイルモジュールのインストールと管理モ...
目次1. --skip-grant-tables 経由で取得する1.1 my.conf を変更し、新...
Linux システムは典型的なマルチユーザー システムです。異なるユーザーは異なる立場にあり、異なる...
VUE は vue-seamless-scroll を使用して、自動的にスクロールしていいねします。...
目次1. はじめに2. ルール検証の入力モード2.1 サンプルコード2.2、フォーム項目2.3. 小...
この記事では、MySQL 5.7.21のインストールに関する注意事項をまとめ、皆さんと共有します。 ...
元データと対象データSQL文を実装する(最大) 選択 店、 月、 最大(dz,fz,sp) が最大値...
<br />質問:特定のファイルにジャンプするには、HTML でどのように記述すればよい...
最近、画像上に半透明の背景でテキストを表示する必要があるという要件に遭遇しました。その効果は次のよう...
【問題分析】 chown コマンドを使用できます。ここで ch は change (変更) を表し...
序文1. この記事で使用したツールは、https://github.com/gianlucabore...
環境: CentOS 7公式ドキュメント: http://supervisord.org/インストー...
目次1. フィルターの概念1. グローバルフィルターのフォーマットをカスタマイズする2. フィルター...