このように、世界最初のエアコンは、人が涼むためではなく、印刷工場の湿気を取り除くために作られたのです。
⇧ amazing...
VeeValidateとは?
Vue 2.x と Vue 3.x でそれぞれバージョンが異なるっぽいけども、
■Vue 2.x用
Template Based Form Validation Framework for Vue.js
■Vue 3.x用
Form Validation for Vue.js
⇧ Vue.jsのためのForm Validationということらしい。
GitHubのドキュメントに、
Form Validation for Vue.js
Vue version support
The main v4 version supports Vue 3.x only, for previous versions of Vue, check the following the table
vue Version | vee-validate version | Documentation Link |
---|---|---|
2.x |
2.x or 3.x |
v2 or v3 |
3.x |
4.x |
v4 |
⇧ バージョンの記載ありましたね。
Vue CLIでVue.jsのプロジェクト作成
何はともあれ、Node.jsがインストールされているのを確認し、適当なディレクトリを作成しておいて、移動したらば、Vue CLIをインストール。
そしたらば、Vue CLIでVue.jsのプロジェクト作成で。
今回はすべてのオプションを選択してみました。
Vueのバージョンは、2.xです。
class-style componentの利用は、Yesで。
Babelの利用も、Yesで。
Vue Routerのhistory modeの利用も、Yesで。
Sass/SCSS(with dart-sass)を選択。
ESLint + Prettier を選択。
Lint on save を選択。
Jest を選択しました。
Cypressを選択しました。
In dedicated config files を選択しました。
ここまでの選択を保存するかについては、Noを選択しました。
プロジェクト作成が開始されます。
Vue.jsのプロジェクトのフォルダをVisual Studio Codeで開いて、
.eslintrc.jsに、prettierの設定を追加しとかないとエラーが出るので、追加しときます。
■C:\Users\Toshinobu\Desktop\soft_work\vue_work\vue-vee-validate\hello-world\.eslintrc.js
module.exports = { root: true, env: { node: true, }, extends: [ "plugin:vue/essential", "eslint:recommended", "@vue/typescript/recommended", "plugin:prettier/recommended", ], parserOptions: { ecmaVersion: 2020, }, rules: { "no-console": process.env.NODE_ENV === "production" ? "warn" : "off", "no-debugger": process.env.NODE_ENV === "production" ? "warn" : "off", "prettier/prettier": [ "error", { endOfLine: "auto", }, ], }, overrides: [ { files: [ "**/__tests__/*.{j,t}s?(x)", "**/tests/unit/**/*.spec.{j,t}s?(x)", ], env: { jest: true, }, }, ], };
VeeValidateを使ってみる
Vue.jsのプロジェクトが作成できたので、本題のVeeValidateを使ってみる。
⇧ 上記を参考に、vee-validateをインストール。Vue 2.xは、vee-validateの3.xを選択する感じになるらしい。
cd [Vue.jsのプロジェクトのディレクトリ]
npm install vee-validate@3 --save
で、ドキュメントのBasic Exampleが何故か、中途半端なとこまでしか記載してくれてないという...適当過ぎるでしょ...
というわけで、VeeValidateが動くとこまで実装。
■C:\Users\Toshinobu\Desktop\soft_work\vue_work\vue-vee-validate\hello-world\src\main.ts
import Vue from "vue"; import App from "./App.vue"; import "./registerServiceWorker"; import router from "./router"; import store from "./store"; import { ValidationProvider, extend } from "vee-validate"; Vue.config.productionTip = false; // Add a rule. extend("secret", { validate: (value) => value === "example", message: "This is not the magic word", }); // Register it globally Vue.component("ValidationProvider", ValidationProvider); new Vue({ router, store, render: (h) => h(App), }).$mount("#app");
■C:\Users\Toshinobu\Desktop\soft_work\vue_work\vue-vee-validate\hello-world\src\views\user\index.vue
<template> <div> <ValidationProvider rules="secret" v-slot="{ errors }"> <input v-model="email" type="text" /> <span>{{ errors[0] }}</span> </ValidationProvider> </div> </template> <script lang="ts"> import { Component, Vue } from "vue-property-decorator"; @Component({ components: {}, }) export default class User extends Vue { private email = ""; } </script>
■C:\Users\Toshinobu\Desktop\soft_work\vue_work\vue-vee-validate\hello-world\src\router\index.ts
import Vue from "vue"; import VueRouter, { RouteConfig } from "vue-router"; import HomeView from "../views/HomeView.vue"; Vue.use(VueRouter); const routes: Array<RouteConfig> = [ { path: "/", name: "home", component: HomeView, }, { path: "/about", name: "about", // route level code-splitting // this generates a separate chunk (about.[hash].js) for this route // which is lazy-loaded when the route is visited. component: () => import(/* webpackChunkName: "about" */ "../views/AboutView.vue"), }, { path: "/user", name: "user", component: () => import(/* webpackChunkName: "about" */ "../views/user/index.vue"), }, ]; const router = new VueRouter({ mode: "history", base: process.env.BASE_URL, routes, }); export default router;
■C:\Users\Toshinobu\Desktop\soft_work\vue_work\vue-vee-validate\hello-world\src\App.vue
import Vue from "vue"; import VueRouter, { RouteConfig } from "vue-router"; <template> <div id="app"> <nav> <router-link to="/">Home</router-link> | <router-link to="/about">About</router-link> | <router-link to="/user">USER</router-link> </nav> <router-view /> </div> </template> <style lang="scss"> #app { font-family: Avenir, Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-align: center; color: #2c3e50; } nav { padding: 30px; a { font-weight: bold; color: #2c3e50; &.router-link-exact-active { color: #42b983; } } } </style>
で、保存して、
で、ブラウザからアクセスして、USERのリンクをクリック。
example まで入力しないと、バリデーションでメッセージが出るようです。
とりあえず、VeeValidateが動くのは確認できたので、スタート地点に立った感じでしょうかね...
それにしても、ドキュメントがドイヒーですね...
毎度モヤモヤ感が半端ない...
今回はこのへんで。