- Vuetify3を使ってログインフォームを構築しています。
- Validationエラーが発生しているときはログイン処理の関数を呼び出さないようにします。
- 認証エラー前の制限をかけることで通信回数を減らします。
目次
- コードと解説
- おわりに
コードと解説
さっそく、どのように実現するか見ていきましょう。Vuetifyはv3を使用していることに注意してください。
以下の記述は画面部分です。ログイフォームを表現しています。
このとき、v-formコンポーネントのrefでValidationエラーを検知しています。
v-form コンポーネントは Vuetify の一部であり、入力要素のバリデーション（validation）をサポートしている。そのため、ref 属性を使用してフォームに参照を作成することで、コンポーネント内のメソッドやデータから直接フォームにアクセスし、バリデーションをトリガーしたり、バリデーションの結果を取得することができるので、それを利用する。
template
<v-card-title class="text-center">ログイン</v-card-title>
<v-form :lazy-validation="true" ref="form">
<v-text-field v-model="email" label="メールアドレス" :rules="emailRules"></v-text-field>
<v-text-field v-model="password" label="パスワード" type="password" :rules="passwordRules"></v-text-field>
</v-form>
<v-card-action class="d-flex">
<v-btn class="mx-auto my-2" color="primary" @click="onLogin">ログイン</v-btn>
</v-card-action>
</v-card>
以下の記述は処理部分です。methodsにログインボタンをクリックした時の処理を書いてあげます。formの中身をみて、trueならバリデーションエラーは起きていないので、if文の中のlogin関数を実行できます。
script lang="ts"
methods: {
async onLogin() {
let e
try{
const form: any = this.$refs.form
const { valid } = await form.validate()
if (valid) {
const response = await this.controller.login(this.email, this.password, this.presenter)
}
} catch (e) {
console.log("エラー")
}
}
}
これで、入力フォームでValidationエラー時はログイン処理を投げないようにすることができました。
ログインボタンを押しても、処理自体を止めているので認証エラーも起きません。
おわりに
Validationエラーが出ている時は、ボタンを非活性化して押せないようにすると、より良いですね。。。