会員登録とログインビュー

まず、会員入力ビューとログインビューを作成する前にルーティングが必要なので、vue routerを構成します.

ルータの設定

main.js

import { createApp } from 'vue'
import App from './App.vue'
import router from './routes/index.js'

createApp(App)
.use(router)
.mount('#app')

main.ルータプラグインをjsに適用します.

router/index.js

import { createRouter, createWebHistory } from 'vue-router';
import Main from '../view/Main.vue';
import Join from '../view/Join.vue';
import Login from '../view/Login.vue';

export default createRouter({  //vue-router version 4 문법
    history: createWebHistory(),
    routes: [
        {
            path: '/',
            name: 'Main',
            component: Main
        },
        {
            path: '/join',
            name: 'Join',
            component: Join
        },
        {
            path: '/login',
            name: 'Login',
            component: Login
        }
    ]
})

/パスの場合はMainビュー、/joinパスの場合はJoinビュー、/loginパスの場合はLoginビューをルーティングします.

フォーム入力の検証

Vere-Validateライブラリ

フォーム入力値を検証するためにvee-validateライブラリを使用しました.

1.必要な機能のインポート

import { Form, Field } from 'vee-validate';

export default {
  components: {
    Form,
    Field
    },
  }

Fieldは単一フォーム入力を表す要素であり、Formはフォームのキャリアである.

2.テンプレートの作成

<template>
  <Form @submit="onSubmit">
     <div class="container mb-4 w-25">
        <div class="userIcon">
          <font-awesome-icon icon="circle-user"  size="5x" color="lightgray"/>
        </div>
        <Field name="id" type="id">
          <div class="field">
            <label for="id" class="form-label">아이디</label>
            <input class="form-control"/>
          </div>
        </Field>
        <Field name="password" type="password">
          <div class="field">
            <label for="pwd" class="form-label">비밀번호</label>
            <input class="form-control" type="password"/>
            <span class="errMsg"></span>
          </div>
        </Field>
        <div class="loginErr" v-if="loginErr">로그인에 실패하였습니다.</div>
        <button type="submit" class="btn btn-secondary mb-3">로그인</button>
     </div>
  </Form>
</template>

field-levelで有効性チェックを行うことも、form-levelで有効性チェックを行うこともでき、複数のフィールドを同時に有効性チェックするために後者の方法を使用しました.

3.検証ルールの作成

yupはvee-validateとともに使用されるデータ検証ライブラリです.

import { object, string }  from 'yup';

yupから使用するルールをインポートします.

computed: {
    schema() {
      return object({
        id: string().required('아이디를 입력해주세요.'),
        password: string().required('비밀번호를 입력해주세요.').matches(/^(?=.*[A-Za-z])(?=.*[0-9])(?=.*[#?!@$%^&*-])(?=.{8,})/,'영문자, 숫자, 특수문자를 조합하여 최소8자리를 입력해주세요.')
      });
    },
  }

規則を作る.このとき,反作用するフォームパターンを生成するために計算に記述する.

<Form :validation-schema="schema">

propsを使用してFormにモードを渡します.

<Field name="id" type="id"  v-slot="{ field, errorMessage, meta }">
        <div class="field">
           <label for="id" class="form-label">아이디</label>
           <input class="form-control" v-bind="field" :class="{ 'is-invalid': !meta.valid && errorMessage }"/>
           <span class="errMsg" v-if="errorMessage && !meta.valid">{{ errorMessage }}</span>
        </div>
</Field>

この素子に指定されたslotはv-slotで取得できます.slotにはfield、errorMessage、metaを使用するいくつかのプロパティがあります.
vee-validate機能をfield:v-bind入力値の属性に適用できるようにする
ErrorMessage:エラーメッセージを表すプロパティ
meta:フィールドのステータスに関する有用な情報を持つプロパティ

:class="{ 'is-invalid': !meta.valid && errorMessage }"

このフィールドの値が無効でエラーメッセージがある場合は、is-invalid値のクラスバインドが適用されます.バインドの結果は次のとおりです.

ログインボタンを押す前にフィールドを反作用でチェックするので、すぐに画面にエラーメッセージが出力されます.

handling form

<Form v-else @submit="onSubmit" :validation-schema="schema">

onSubmitハンドルをFormに追加すると、vee-validateはフォームのコミット時にフォーム入力値をHandlerの最初のパラメータとして渡します.
各フィールドに対して他のエラー管理を行い、アクションをパラメータとしてユーザーに渡すこともできます.

methods: {
  async onSubmit(userData, actions) {
          try{
            const res = await joinUser(userData); //API 통신
            if(!res.data.resultData.duplicatedId){
              this.showSuccessModal();
            }else{
              actions.setFieldError('id', '이미 사용중인 아이디 입니다.');
            }
          }catch(err) {
            console.log(err);
          }
      }
}

そしてapi通信コードを書くと終わります!
ログインビューは、会員がビューに参加するように生成することもできます.

リファレンス

vee-validate