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) の構成
title: vue は vue-meta-info を使用して各ページのタイトルとメタ情報を設定...
使用される Docker イメージが増えるにつれて、イメージを保存する場所、つまりウェアハウスが必要...
多くの場合、画像を表示する<a>タグのスタイルに遭遇しますが、タグ内にテキストがあり、そ...
目次1. 集計クエリ1. COUNT関数2. SUM関数3. AVG関数4. MAX関数とMIN関数...
<input> タグ<input> タグはユーザー情報を収集するために使用さ...
序文MySQL クエリは select コマンドを使用し、limit および offset パラメー...
目次シンプルなSpringbootプロジェクトを作成する1. pom.xmlでSpring Boot...
プロジェクトを作成するWeChat開発者ツールでプロジェクトを作成し、言語でTypeScriptを選...
CSS3 アニメーションで実現したシンプルでクールな効果。最終的な効果は次のようになります。 ページ...
この記事では、CSS3 の transform を使用して子要素の固定配置を絶対配置に変更する方法を...
序文私のように、Java バックエンドに勤勉な人であれば、多数のプロジェクト機能を実装することに加え...
結合の書き方左結合を使用する場合、左側のテーブルが必ず駆動テーブルになりますか? 2 つのテーブルの...
Sttty は、Linux で端末設定を変更および印刷するための一般的なコマンドです。 1. パラ...
Nginx の紹介Nginx (「エンジン x」) は、ロシアのプログラマー Igor Sysoev...
余計なことは言わないで、コードだけ見てみましょう〜 -- テーブル内のフィールドコメントを表示および...