はじめまして、普段はproduct managerをやっているtatsukenと申します。
研修の一環でvue.js、expressを書くことがあったので、そのことを中心にまとめていきたいと思います
何をするのか
v8nというnode moduleを使用してvue.jsの入力フォームにバリデーションをかけていきたいと思います。
vue.jsの一般的なバリデーションライブラリとしてはvee-validateなどがありますが、
v8nは簡単にバリデーションをかけたいときやバリデーションのカスタマイズを行いたいときに便利です。
使い方
install(vue project)
npm install v8n -s
Sample code
sample.vue
<template>
<form action>
<input type="text" v-model="email">
<input type="password" v-model="password">
<input type="text" v-model="email">
<input type="submit" value="decide" @click="onClickSubmitButton">
</form>
</template>
<script>
import v8n from "v8n";
export default {
data() {
return {
email: null,
password: null
};
},
methods: {
onClickSubmitButton() {
const message = {
null: "中身が空です",
minLength: "文字数は4文字以上です",
pattern: "emailを入力してください",
maxLength: "文字数が多すぎます"
};
try {
v8n()
.not.null() // 値がnullじゃないか
.string() // 文字列
.minLength(4) // a@b.c を想定して最低5文字
.pattern(/[^\s@]+@[^\s@]+\.[^\s@]+/)
.check(this.email);
} catch (ex) {
let rule = ex.rule.name;
alert(`Emailに関して${message[rule]}`);
return;
}
try {
v8n()
.not.null()
.string()
.minLength(4)
.check(this.password);
} catch (error) {
let rule = error.rule.name;
alert(`passwordに関して${message[rule]}`);
return;
}
}
}
};
</script>
説明
- まずv8nをimport
import v8n from "v8n"; -
v8n()に様々な設定を加えていくことで様々なバリデーションを作ることが出来ます。
| code | rule |
|---|---|
| null() | nullかどうかを判定する |
| not.null() | null出ないかどうかを判定する |
| string() | stringかどうかを判定する |
| minLength(4) | 4文字以上かどうかを判定する |
| pattern(/[^\s@]+@[^\s@]+.[^\s@]+/) | patternに一致しているかどうかを判定する(今回はemailのpattern maching) |
- 他にも様々なruleをつけることが出来ます(詳しくはこちらにまとまっていました)
- 加えた条件に対して
.check(変数名)を行うことで任意の変数が自分の設定したruleに一致しているか判定することができます - あとはpromiseなりtry catchなりでerrorを受け取り、エラーハンドリングを行ってください
- errorの場合どのruleによってerrorになったかは
error.rule.name;などで受け取ることが出来ます。
参考にしたもの
最後に
ざっくりとv8nの使い方について説明しました。
初めての投稿なので間違いなどあれば指摘していただけると幸いです。