유효성 검사

유효성 검사는 필수입력 항목의 값이 null, undefined, '' 일때, 체크박스는 체크한것이 없을때 alert을 띄우고 포커스한다.

VmConatiner 방식

VmContainer에 ref를 만들고, required()를 실행한다.

<VmContainer ref="containerRef">
  <VmSearch label="VmSearch" v-model="containerData.search" required />
  <VmCheckbox label="VmCheckbox - toggle" v-model="containerData.checkboxSingle" toggle required/>
  <VmCheckbox label="VmCheckbox - multi" v-model="containerData.checkboxMulti" 
              table-id="CMM_CODE" code="CMM003" required />
  <VmRadio label="VmRadio" v-model="containerData.radio" table-id="CMM_CODE" code="CMM003"
    uncheckable required />
  <VmDate label="VmDate" v-model="containerData.date" required />
  <VmMonth label="VmMonth" v-model="containerData.month" required />
  <VmYear label="VmYear" v-model="containerData.year" required />
  <VmDateRange label="VmDateRange - 모두필수" 
    v-model:stt="containerData.dateRangeStt"
    v-model:end="containerData.dateRangeEnd" required />
  <VmDateRange label="VmDateRange - 시작필수"
    v-model:stt="containerData.dateRangeSttStt"
    v-model:end="containerData.dateRangeSttEnd" required-stt />
  <VmDateRange label="VmDateRange - 종료필수"
    v-model:stt="containerData.dateRangeEndStt"
    v-model:end="containerData.dateRangeEndEnd" required-end />
  <VmMonthRange label="VmMonthRange - 모두필수"
    v-model:stt="containerData.monthRangeStt"
    v-model:end="containerData.monthRangeEnd" required />
  <VmMonthRange label="VmMonthRange - 시작필수"
    v-model:stt="containerData.monthRangeSttStt"
    v-model:end="containerData.monthRangeSttEnd" required-stt />
  <VmMonthRange label="VmMonthRange - 종료필수"
    v-model:stt="containerData.monthRangeEndStt"
    v-model:end="containerData.monthRangeEndEnd" required-end />
  <VmSelect label="VmSelect" v-model="containerData.select" 
    option-first="ALL" table-id="CMM_CODE" code="CMM003"
    required />
  <VmTextarea label="VmTextarea" v-model="containerData.textarea" required />
</VmContainer>

import VmContainerVue from "@/core/components/container/VmContainer.vue"
const containerData = reactive({
  search: '',
  checkboxSingle: '',
  checkboxMulti: [],
  radio: '',
  date: '',
  month: '',
  year: '',
  dateRangeStt: '',
  dateRangeEnd: '',
  dateRangeSttStt: '',
  dateRangeSttEnd: '',
  dateRangeEndStt: '',
  dateRangeEndEnd: '',
  monthRangeStt: '',
  monthRangeEnd: '',
  monthRangeSttStt: '',
  monthRangeSttEnd: '',
  monthRangeEndStt: '',
  monthRangeEndEnd: '',
  select: '',
  textarea: ''
})

const containerRef = ref<InstanceType<typeof VmContainerVue>>()
async function requiredContainer(errorMsg: boolean) {

  // 1 VmContainer 하위 컴포넌트에 required 가 있는것의 입력여부 검사
  //   값이 없으면 alert하고 focus 한다.
  const result = await containerRef.value?.required()

  // 2 컴포넌트에 v-model의 필드명과 동일한 name속성 지정하고 파라미터로 data
  // const result = await containerRef.value?.required(containerData)

  // 3 두버째 파라미터로 errorMsg 옵션있으면 required가 있는 것을 전부 검사해서 메시지를 반환
  // const result = await containerRef.value?.required(undefined, { errorMsg, debug: true })
}

Component의 ref 방식

컴포넌트에 required와 ref 지정하고 required 함수로 검사

<VmContainer col="2" ref="containerRef" style="overflow:auto">
  <VmSearch label="VmSearch" v-model="refData.search" name="search" ref="searchRef" required />
  <VmCheckbox label="VmCheckbox - toggle" v-model="refData.checkboxSingle" 
    toggle required ref="checkboxRef" />
  <VmCheckbox label="VmCheckbox - multi" v-model="refData.checkboxMulti" 
    table-id="CMM_CODE" code="CMM003" required ref="checkboxRef" />
  <VmRadio label="VmRadio" v-model="refData.radio"  
    table-id="CMM_CODE" code="CMM003" 
    ref="radioRef" required uncheckable />
  <VmDate label="VmDate" v-model="refData.date"  ref="dateRef" required />
  <VmMonth label="VmMonth" v-model="refData.month"  ref="monthRef" required />
  <VmYear label="VmYear" v-model="refData.year"  ref="yearRef" required />
  <VmDateRange label="VmDateRange - 모두필수"
    v-model:stt="refData.dateRangeStt" v-model:end="refData.dateRangeEnd"
    required ref="dateRangeRef" />
  <VmDateRange label="VmDateRange - 시작필수"
    v-model:stt="refData.dateRangeSttStt" v-model:end="refData.dateRangeSttEnd"
    ref="dateRangeSttRef" required-stt />
  <VmDateRange label="VmDateRange - 종료필수"
    v-model:stt="refData.dateRangeEndStt" v-model:end="refData.dateRangeEndEnd"
    ref="dateRangeEndRef" required-end />
  <VmMonthRange label="VmMonthRange - 모두필수"
    v-model:stt="refData.monthRangeStt" v-model:end="refData.monthRangeEnd"
    ref="monthRangeRef" required />
  <VmMonthRange label="VmMonthRange - 시작필수"
    v-model:stt="refData.monthRangeSttStt" v-model:end="refData.monthRangeSttEnd"
    ref="monthRangeSttRef" required-stt />
  <VmMonthRange label="VmMonthRange - 종료필수"
    v-model:stt="refData.monthRangeEndStt" v-model:end="refData.monthRangeEndEnd"
    ref="monthRangeEndRef" required-end />
  <VmSelect label="VmSelect" v-model="refData.select" 
    option-first="ALL" table-id="CMM_CODE" code="CMM003"
    ref="selectRef" required />
  <VmTextarea label="VmTextarea" v-model="refData.textarea" ref="textareaRef" required />
</VmContainer>

필수입력 검사 함수

function required(
  val: string | number | string[], 
  element?: Ref<{ inputRef?: HTMLElement | HTMLElement[] | undefined }> | HTMLElement | HTMLElement[], 
  targetLabel?: string, 
  fullMsg?: string): Promise<boolean>

import { required } from "@/core"

const refData = reactive({
  search: '',
  checkboxSingle: '',
  checkboxMulti: [],
  radio: '',
  date: '',
  month: '',
  year: '',
  dateRangeStt: '',
  dateRangeEnd: '',
  dateRangeSttStt: '',
  dateRangeSttEnd: '',
  dateRangeEndStt: '',
  dateRangeEndEnd: '',
  monthRangeStt: '',
  monthRangeEnd: '',
  monthRangeSttStt: '',
  monthRangeSttEnd: '',
  monthRangeEndStt: '',
  monthRangeEndEnd: '',
  select: '',
  textarea: ''
})

const searchRef = ref()
const checkboxSingleRef = ref()
const checkboxMultiRef = ref()
const radioRef = ref()
const dateRef = ref()
const monthRef = ref()
const yearRef = ref()
const dateRangeRef = ref()
const dateRangeSttRef = ref<InstanceType<typeof VmDateRangeVue>>()
const dateRangeEndRef = ref<InstanceType<typeof VmDateRangeVue>>()
const monthRangeRef = ref()
const monthRangeSttRef = ref()
const monthRangeEndRef = ref()
const selectRef = ref()
const textareaRef = ref()

// 컴포넌트의 label 속성으로 alert 메시지 표시
async function requiredRefLabel() {
  const result =
    await required(refData.search, searchRef,) &&
    await required(refData.checkboxSingle, checkboxSingleRef) &&
    await required(refData.checkboxMulti, checkboxMultiRef) &&
    await required(refData.radio, radioRef) &&
    await required(refData.date, dateRef) &&
    await required(refData.month, monthRef) &&
    await required(refData.year, yearRef) &&
    // VmDateRange 시작, 종료가 모두 필수
    await required(refData.dateRangeStt, dateRangeRef) &&
    await required(refData.dateRangeEnd, dateRangeRef) &&
    // VmDateRange 시작만 필수. 시작 input참조를 전달.
    await required(refData.dateRangeSttStt, dateRangeSttRef.value?.inputRef[0]) && // 시작
    await required(refData.dateRangeEndEnd, dateRangeEndRef.value?.inputRef[1]) && // 종료
    await required(refData.monthRangeStt, monthRangeRef) &&
    await required(refData.monthRangeEnd, monthRangeRef) &&
    await required(refData.monthRangeSttStt, monthRangeSttRef.value?.inputRef[0]) &&
    await required(refData.monthRangeEndEnd, monthRangeEndRef.value?.inputRef[1]) &&
    await required(refData.select, selectRef) &&
    await required(refData.textarea, textareaRef)
  console.log('requiredRefTargetLabel result = ', result)
}

// 컴포넌트의 label 속성 대신 세번째 파라미터로 필수입력항목 이름을 alert에 표시
async function requiredRefTargetLabel() {
  const result =
    await required(refData.search, searchRef, '서치') &&
    await required(refData.checkboxSingle, checkboxSingleRef, '체크박스 - single') &&
    await required(refData.checkboxMulti, checkboxMultiRef, '체크박스 - multi') &&
    await required(refData.radio, radioRef, '라디오') &&
    await required(refData.date, dateRef, '데이트') &&
    await required(refData.month, monthRef, '먼쓰') &&
    await required(refData.year, yearRef, '이어') &&
    await required(refData.dateRangeStt, dateRangeRef, '데이트레인지-모두필수-시작') &&
    await required(refData.dateRangeEnd, dateRangeRef, '데이트레인지-모두필수-종료') &&
    await required(refData.dateRangeSttStt, dateRangeSttRef.value?.inputRef[0], '데이트레인지-시작필수-시작') &&
    await required(refData.dateRangeEndEnd, dateRangeEndRef.value?.inputRef[1], '데이트레인지-종료필수-종료') &&
    await required(refData.monthRangeStt, monthRangeRef, '먼쓰레인지-모두필수-시작') &&
    await required(refData.monthRangeEnd, monthRangeRef, '먼쓰레인지-모두필수-종료') &&
    await required(refData.monthRangeSttStt, monthRangeSttRef.value?.inputRef[0], '먼쓰레인지-시작필수-시작') &&
    await required(refData.monthRangeEndEnd, monthRangeEndRef.value?.inputRef[1], '먼쓰레인지-종료필수-종료') &&
    await required(refData.select, selectRef, '셀렉트') &&
    await required(refData.textarea, textareaRef, '텍스트에이리어')
  console.log('requiredRefTargetLabel result = ', result)
}

// 세번째 파라미터로 필수입력항목 이름대신 네번째 파라미터로 alert 메시지 표시
async function requiredRefFullMsg() {
  await required(refData.search, searchRef, '서치', '서치는 필수 입력 항목 입니다.') &&
    await required(refData.checkboxSingle, checkboxSingleRef, '체크박스 - single', '여부를 체크해주세요') &&
    await required(refData.checkboxMulti, checkboxMultiRef, '체크박스 - multi', '체크박스를 선택해주세요') &&
    await required(refData.radio, radioRef, '라디오', '라디오를 선택하세요') &&
    await required(refData.date, dateRef, '데이트', '데이트를 입력하세요') &&
    await required(refData.month, monthRef, '먼쓰', '먼쓰를 입력하세요') &&
    await required(refData.year, yearRef, '이어', '이어는 필수입니다.') &&

    await required(refData.dateRangeStt, dateRangeRef, '데이트레인지-모두필수-시작', '데이트레인지시작은 필수 입력 항목 입니다.') &&
    await required(refData.dateRangeEnd, dateRangeRef, '데이트레인지-모두필수-종료', '데이트레인지종료은 필수 입력 항목 입니다.') &&
    await required(refData.dateRangeSttStt, dateRangeSttRef.value?.inputRef[0], '데이트레인지-시작필수-시작', '데이트레인지 시작필수의 시작은 필수 입력 항목 입니다.') &&
    await required(refData.dateRangeEndEnd, dateRangeEndRef.value?.inputRef[1], '데이트레인지-종료필수-종료', '데이트레인지 종료필수의 종료는 필수 입력 항목 입니다.') &&

    await required(refData.monthRangeStt, monthRangeSttRef, '먼쓰레인지시작', '먼쓰레인지시작은 필수 입력 항목 입니다.') &&
    await required(refData.monthRangeEnd, monthRangeEndRef, '먼쓰레인지종료', '먼쓰레인지종료은 필수 입력 항목 입니다.') &&
    await required(refData.monthRangeSttStt, monthRangeSttRef.value?.inputRef[0], '먼쓰레인지-시작필수-시작', '먼쓰레인지-시작필수-시작의 시작먼쓰는 필수입력 입니다.') &&
    await required(refData.monthRangeEndEnd, monthRangeEndRef.value?.inputRef[1], '먼쓰레인지-종료필수-종료', '먼쓰레인지-종료필수-종료의 종료먼쓰는 필수입력 입니다.') &&
    await required(refData.select, selectRef, '셀렉트', '셀렉트를 선택해주세요') &&
    await required(refData.textarea, textareaRef, '텍스트에이리어', '텍스트에이리어를 작성해주세요')
  console.groupEnd()
}

template ref 대신 컴포넌트의 name으로 검사

<VmContainer col="2" ref="containerRef" style="overflow:auto">
  <VmSearch label="VmSearch" v-model="refData.search" name="search" ref="searchRef" required />
  <VmCheckbox label="VmCheckbox - toggle" v-model="refData.checkboxSingle" name="checkboxSingle" required toggle />
  <VmCheckbox label="VmCheckbox - multi" v-model="refData.checkboxMulti" name="checkboxMulti" required
    table-id="CMM_CODE" code="CMM003"  />
  <VmRadio label="VmRadio" v-model="refData.radio" name="radio" required
    table-id="CMM_CODE" code="CMM003"  uncheckable />
  <VmDate label="VmDate" v-model="refData.date" name="date" required />
  <VmMonth label="VmMonth" v-model="refData.month" name="month" required />
  <VmYear label="VmYear" v-model="refData.year" name="year" required />
  <VmDateRange label="VmDateRange - 모두필수"
    v-model:stt="refData.dateRangeStt" v-model:end="refData.dateRangeEnd"
    name-stt="dateRangeStt" name-end="dateRangeEnd" required />
  <VmDateRange label="VmDateRange - 시작필수"
    v-model:stt="refData.dateRangeSttStt" v-model:end="refData.dateRangeSttEnd"
    name-stt="dateRangeSttStt" required-stt />
  <VmDateRange label="VmDateRange - 종료필수"
    v-model:stt="refData.dateRangeEndStt" v-model:end="refData.dateRangeEndEnd"
    name-end="dateRangeEndEnd" required-end />
  <VmMonthRange label="VmMonthRange - 모두필수"
    v-model:stt="refData.monthRangeStt" v-model:end="refData.monthRangeEnd"
    name-stt="monthRangeStt" name-end="monthRangeEnd" required />
  <VmMonthRange label="VmMonthRange - 시작필수"
    v-model:stt="refData.monthRangeSttStt" v-model:end="refData.monthRangeSttEnd"
    name-stt="monthRangeSttStt" required-stt />
  <VmMonthRange label="VmMonthRange - 종료필수"
    v-model:stt="refData.monthRangeEndStt" v-model:end="refData.monthRangeEndEnd"
    name-end="monthRangeEndEnd" required-end />
  <VmSelect label="VmSelect" v-model="refData.select" name="select" required
    option-first="ALL" table-id="CMM_CODE" code="CMM003" />
  <VmTextarea label="VmTextarea" v-model="refData.textarea" name="textarea" required />
</VmContainer>

async function requiredRefRequiredGetElement() {
  const result =
    await required(refData.search, containerRef.value?.getElement('search')) &&
    await required(refData.checkboxSingle, containerRef.value?.getElement('checkboxSingle')) &&
    await required(refData.checkboxMulti, containerRef.value?.getElement('checkboxMulti')) &&
    await required(refData.radio, containerRef.value?.getElement('radio')) &&
    await required(refData.date, containerRef.value?.getElement('date')) &&
    await required(refData.month, containerRef.value?.getElement('month')) &&
    await required(refData.year, containerRef.value?.getElement('year')) &&

    await required(refData.dateRangeStt, containerRef.value?.getElement('dateRangeStt')) &&
    await required(refData.dateRangeEnd, containerRef.value?.getElement('dateRangeEnd')) &&
    await required(refData.dateRangeSttStt, containerRef.value?.getElement('dateRangeSttStt')) &&
    await required(refData.dateRangeEndEnd, containerRef.value?.getElement('dateRangeEndEnd')) &&
    await required(refData.monthRangeStt, containerRef.value?.getElement('monthRangeStt')) &&
    await required(refData.monthRangeEnd, containerRef.value?.getElement('monthRangeEnd')) &&
    await required(refData.monthRangeSttStt, containerRef.value?.getElement('monthRangeSttStt')) &&
    await required(refData.monthRangeEndEnd, containerRef.value?.getElement('monthRangeEndEnd')) &&
    await required(refData.select, containerRef.value?.getElement('select')) &&
    await required(refData.textarea, containerRef.value?.getElement('textarea'))
  false
  console.log('requiredRefTargetLabel result = ', result)
  console.groupEnd()
}

유효성 검사 #

VmConatiner 방식 #

Component의 ref 방식 #

유효성 검사

VmConatiner 방식

Component의 ref 방식