Vue TypeScript バリデーションチェック

Vuetifyのrulesを使う。

Vuetifyのrulesを使うことで比較的簡単に実装できます。
なので今回はvuetifyのrulesを使います。

前にはてなブログでvuetifyについて簡単に書いた記事書きました。
https://taitoajiki.hatenablog.com/entry/2019/10/21/232910

いざ、実装

<template>
<v-text-field solo :counter="10" :rules="bbb"></v-text-field>
</template>
<script src="./Rules.ts"></script> 

  private bbb: any = [
    (v: any) => !!v || "Name is required",
    (v: any) => this.nameRules(v)
  ];
 
   private nameRules(value: any): any {
    return value.length <= 10 || "Name must be less than 10 characters";
  }

ポイント

rulesは配列にすること。

入力文字されたがコードのvに入ってくること。

そしてbbbの中の関数はfalseの場合に何の文字を
falseのときにどんな文字を表示をさせるのかが大事です。

説明

nameRulesを説明すると、returnを見てもらうと
入力文字が10文字以下の場合はtrueを返します。
そして10文字以上のはfalseとなって表示する文字が返却される。
という感じです。

はてなブログ、Twitterやってます。

Twitterを始めました。始めたばかりで友達少ないのでフォロー待ってます！
Twitterはこちら⬇︎
https://twitter.com/apasn1
はてなブログはこちら⬇︎
https://taitoajiki.hatenablog.com/

Vuetifyのvalidation公式ドキュメント