Vue vee-validateプラグインの簡単な使い方

npm と [email protected]

'vee-validate' から { フォーム、フィールド } をインポートします。

// エクスポート用の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 'ユーザー契約に同意するにはチェックを入れてください'
    真を返す
  }
}

// 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 } を返します
 } 
</スクリプト>

//1. 入力を `Field` コンポーネントに変更します。これはデフォルトで入力として解析されます。
//2. `Field` は、スキーマ内のどの検証ルールを使用するかを指定するための name 属性を追加します //3. `Field` は、フォームデータの双方向バインディングを提供するために v-model を追加します //4. フォーム検証エラーが発生すると、エラークラス名 `error` が表示され、赤い枠線の <Field が表示されます
      v-model="フォーム.アカウント"
      名前="アカウント" 
      タイプ="テキスト"
      placeholder="ユーザー名を入力してください"
      :class="{ error: errors.account }" // エラーメッセージが返された場合、クラスエラーを表示するかどうかはtrueです
    />
    <!-- <input type="text" placeholder="ユーザー名を入力してください" /> -->

// フォームにバインドされたデータ const form = reactive({
  account: null, // アカウント password: null, // パスワード isAgree: true // 選択されているかどうか})

// 現在のフォームに必要な検証データルールを宣言します const curSchema = reactive({
  アカウント: schema.account, // アカウント パスワード: schema.password, // パスワード isAgree: schema.isAgree // 選択されているかどうか})