127. Validation Check | 길이 유효성 검사 기능

1. PostAddForm.vue

- computed에 isContentsValid() 함수 생성  return this.contents.length < 200;

- v-if="!isContentsValid"로 textarea 글자수가 200이 넘어가면 경고문구 뜨게 구현

<template>
  <div class="contents">
    <h1 class="page-header">Create Posts</h1>
    <div class="form-wrapper">
      <form class="form" @submit.prevent="submitForm">
        <div>
          <label for="title">Title : </label>
          <input id="title" type="text" v-model="title" />
        </div>
        <div>
          <label for="contents">Contents : </label>
          <textarea
            name=""
            id="contents"
            cols="30"
            rows="5"
            v-model="contents"
          ></textarea>

          <p v-if="!isContentsValid" class="validation-text warning">
            Contents must be lese than 250
          </p>
        </div>
        <button type="submit" class="btn">Create</button>
      </form>
      <p class="log">{{ this.logMessage }}</p>
    </div>
  </div>
</template>

<script>
import { createPosts } from '@/api/index';

export default {
  data() {
    return {
      title: '',
      contents: '',
      logMessage: '',
    };
  },

  computed: {
    isContentsValid() {
      return this.contents.length < 200;
    },
  },
  mounted() {},

  methods: {
    async submitForm() {
      try {
        const response = await createPosts({
          title: this.title,
          contents: this.contents,
        });
        console.log('submit');
        console.log(response);
      } catch (error) {
        // 에러처리
        console.log(error.response.data.message);
        this.logMessage = error.response.data.message;
      }
    },
  },
};
</script>

<style scoped>
.form-wrapper .form {
  width: 100%;
}

.btn {
  color: #fff;
}
</style>