[Team 제주 넘는 차] 예약 페이지 유효성/공란 체크

요구사항

• (팀원분이 만들어주신 화면에) 인풋 폼 공란/유효성 체크 기능 넣기
• 전화번호 파이프 자동 삽입

 

views/reservation/Reservation.vue

로직은 회원가입 때 로직과 동일하다고 보면 된다. 근데 내가 bootstrap vue를 이용해서 짰기 때문인지는 모르겠는데 toLocaleString()가 충돌이 나서 금액에 들어가있던 해당 명령어를 빼야했다.

처음으로 다른 사람이 짠 아예 새로운 코드를 수정해본 것 같은데 신기했다.

// ...

      <div class="reservation_box">
        <b-form-group>
          <label for="clientName">예약자 이름</label>
          <b-form-input
            ref="clientName"
            v-model="res.clientName"
            name="clientName"
            aria-describedby=" 예약자 이름"
            :state="clientNameState"
            required
            trim
            size="sm"
          ></b-form-input>

          <!-- 조건 미충족 시 -->
          <b-form-invalid-feedback v-if="res.clientName" id="input-live-feedback">
            이름은 한글 2자리 이상 입력해야 합니다
          </b-form-invalid-feedback>

          <!-- 조건 충족 시 -->
          <b-form-text v-if="res.clientName" id="input-live-help"></b-form-text>
        </b-form-group>

        <b-form-group>
          <label for="driverName">운전자 이름</label>
          <b-form-input
            ref="driverName"
            v-model="res.driverName"
            name="driverName"
            aria-describedby="운전자 이름"
            :state="driverNameState"
            required
            trim
            size="sm"
          ></b-form-input>

          <!-- 조건 미충족 시 -->
          <b-form-invalid-feedback v-if="res.driverName" id="input-live-feedback">
            이름은 한글 2자리 이상 입력해야 합니다
          </b-form-invalid-feedback>

          <!-- 조건 충족 시 -->
          <b-form-text v-if="res.driverName" id="input-live-help"></b-form-text>
        </b-form-group>

        <b-form-group>
          <label for="driverBirth">운전자 생년월일</label>
          <b-form-input
            ref="driverBirth"
            v-model="res.driverBirth"
            name="driverBirth"
            type="date"
            size="sm"
            required
            trim
          ></b-form-input>
          <label for="phoneNumber">핸드폰 번호</label>
          <b-form-input
            ref="phoneNumber"
            v-model="res.phoneNumber"
            name="phoneNumber"
            required
            trim
            placeholder="000-0000-0000"
            type="text"
            size="sm"
            aria-describedby="핸드폰 번호"
            @keyup="getPhoneMask(res.phoneNumber)"
          ></b-form-input>
        </b-form-group>
      </div>
      <div class="payment">
        <h3>무통장 입금</h3>
        <p><span>우리</span>**** *** **** **</p>
        <p><span>국민</span>**** *** **** **</p>
        <p><span>농협</span>**** *** **** **</p>
      </div>
      <div class="pay">
        <button @click="goResCheck(res)">
          <span class="price">{{ goRes.price }}</span
          >원 입금 완료
        </button>
      </div>
    </div>
  </div>
</template>

<script>
import datetime from 'vuejs-datetimepicker'
export default {
  name: 'GoRes',
  components: { datetime },
  data() {
    return {
      goRes: this.$route.params,
      res: {
        start: '',
        end: '',
        clientName: '',
        driverName: '',
        phoneNumber: '',
        driverBirth: '',

// ...

  computed: {
    // 이름 유효성 검사
    clientNameState() {
      return this.res.clientName.length > 1 && /^[가-힣]*$/.test(this.res.clientName) // 한글 2자리 이상
    },
    driverNameState() {
      return this.res.driverName.length > 1 && /^[가-힣]*$/.test(this.res.driverName) // 한글 2자리 이상
    }
  },
  methods: {
    goResCheck(props) {
      console.log(props)
      if (this.checkInput() === false) {
        // 유효성/공란 체크
        return false
      } else {
        this.$router.push({
          name: 'goResCheck',
          params: props
        })
      }
    },

    // 공란 및 유효성 여부 체크
    checkInput() {
      const inputForm = this.res
      // console.log(inputForm)
      if (inputForm.clientName == '') {
        alert('예약자 성함을 입력해 주세요')
        this.$refs.clientName.focus()
        return false
      } else if (this.clientNameState === false) {
        this.$refs.clientName.focus()
        return false
      }

      if (inputForm.driverName == '') {
        alert('운전자 성함을 입력해 주세요')
        this.$refs.driverName.focus()
        return false
      } else if (this.driverNameState === false) {
        this.$refs.driverName.focus()
        return false
      }

      if (inputForm.phoneNumber == '') {
        alert('전화번호를 입력해 주세요')
        this.$refs.phoneNumber.focus()
        return false
      } else if (this.formatNumber === false) {
        alert('전화번호를 확인해 주세요')
        this.$refs.phoneNumber.focus()
        return false
      }

      if (inputForm.driverBirth == '') {
        alert('생년월일을 입력해 주세요')
        this.$refs.driverBirth.focus()
        return false
      } else {
        return true
      }
    },

    // 전화번호 글자수 제한
    formatNumber(e) {
      return String(e).substring(0, 13) // 최대 11자리 010-1234-5678
    },

    // 전화번호 숫자만 입력 시 파이프(-) 자동 입력
    getPhoneMask(val) {
      let res = this.getMask(val)
      this.res.phoneNumber = res

      // // 서버 전송 값에는 '-'를 제외하고 숫자만 저장
      // this.$store.getters.User.userPhoneNumber = this.user.userPhoneNumber.replace(/[^0-9]/g, '')
    },

    getMask(inputNumber) {
      if (!inputNumber) return inputNumber
      inputNumber = inputNumber.replace(/[^0-9]/g, '')

      let res = ''
      if (inputNumber.length < 8) {
        res = inputNumber
      } else if (inputNumber.length == 8) {
        res = inputNumber.substr(0, 4) + '-' + inputNumber.substr(4)
      } else if (inputNumber.length == 9) {
        res = inputNumber.substr(0, 3) + '-' + inputNumber.substr(3, 3) + '-' + inputNumber.substr(6)
      } else if (inputNumber.length == 10) {
        res = inputNumber.substr(0, 3) + '-' + inputNumber.substr(3, 3) + '-' + inputNumber.substr(6)
      } else if (inputNumber.length > 10) {
        res = inputNumber.substr(0, 3) + '-' + inputNumber.substr(3, 4) + '-' + inputNumber.substr(7)
      }
      //   }
      // }
      return res
    }
  }
}
</script>