ScValidator

ScValidator 컴포넌트는 자식 요소에 설정된 rules를 수집하여, 일괄 검증(validateAll) 및 화면상의 에러 표시 초기화(clearAll)를 지원합니다. 여러 ScFormItem의 유효성 검사 결과를 한 번에 확인하고, 검증 결과에 따라 로직을 분기할 수 있습니다.

---

✅ 기본 사용법

회사

이름 (최대 5자)

나이

성별

선택

남자

여자

이메일

가능 지역

선택

메모

0 /100

check

---1------2------3------4---

날짜

기간

  ~  

<sc-validator ref="validator">
  <sc-form-box col="1">
    <sc-form-item label="회사" required>
      <sc-text-field v-model="company" :rules="validateRule" :lazy="false" class="w-full" />
    </sc-form-item>
    <sc-form-item label="이름 (최대 5자)" required>
      <sc-text-field v-model="name" :rules="[ruleRequired, ruleMaxLength(name, 5)]" class="w-full"/>
    </sc-form-item>
    <sc-form-item label="나이" required>
      <sc-text-field
        v-model="age"
        :rules="[ruleRequired, ruleNumeric, ruleBetween(age, 0, 100)]" class="w-full"
      />
    </sc-form-item>
    <sc-form-item label="성별" required>
      <sc-dropdown :items="['남자', '여자']" v-model="gender" :rules="[ruleRequired]" class="w-full" />
    </sc-form-item>
    <sc-form-item label="이메일" required>
      <sc-text-field v-model="email" :rules="[ruleRequired, ruleEmail]" class="w-full" />
    </sc-form-item>
    <sc-form-item label="가능 지역" required>
      <sc-multi-dropdown
        :items="multiItems"
        v-model="multiItemValue"
        :rules="[ruleNotEmpty]"
        class="w-full"
      />
    </sc-form-item>
    <sc-form-item label="메모" required>
      <sc-text-area v-model="memo" :rules="[ruleNotEmpty]" maxlength="100" class="w-full" />
    </sc-form-item>
    <sc-form-item label="check" required>
      <sc-checkbox-wrapper v-model="checkValue" :rules="[ruleNotEmpty]">
        <sc-checkbox value="1">---1---</sc-checkbox>
        <sc-checkbox value="2">---2---</sc-checkbox>
        <sc-checkbox value="3">---3---</sc-checkbox>
        <sc-checkbox value="4">---4---</sc-checkbox>
      </sc-checkbox-wrapper>
    </sc-form-item>
    <sc-form-item label="날짜" required>
      <sc-datepicker v-model="date" :rules="[ruleRequired]"
      /></sc-form-item>
    <sc-form-item label="기간" required>
      <sc-date-range-picker v-model="dates" :rules="[rulePeriodRequired]" />
    </sc-form-item>
    <sc-form-item>
      <template #custom>
        <sc-button @click="check">Check</sc-button>
        <sc-button
          @click="clear"
          v-tooltip="`값을 지우는게 아니라 화면상의 validation 만 초기화 합니다.`"
        >Validation Reset</sc-button
        >
      </template>
    </sc-form-item>
  </sc-form-box>
</sc-validator>

<script setup>
import { ref } from 'vue';
import { useRules } from "slsoft-components";

// 필요한 rule만 가져옵니다.
const {
  ruleRequired,
  ruleNumeric,
  ruleEmail,
  ruleMaxLength,
  ruleNotEmpty,
  ruleBetween,
  rulePeriodRequired
} = useRules();

// 컴포넌트 참조를 위한 ref
const validator = ref(null);

// Form 데이터
const company = ref('');
const name = ref('');
const age = ref('');
const email = ref('');
const memo = ref('');
const gender = ref('');
const date = ref('');
const dates = ref(['', '']);
const multiItems = ref([
  { value: 'A', text: 'A Zone' },
  { value: 'B', text: 'B Zone' },
  { value: 'C', text: 'C Zone' },
  { value: 'D', text: 'D Zone' },
]);
const multiItemValue = ref([]);
const checkValue = ref([]);

// 수동으로 정의한 validation rule
const validateRule = [
  (v) => !!v || '필수값입니다 (공통 rule이 아닌 수동)',
  (v) => v.length <= 10 || '최대 10자이상 입력하세요',
];

// 검증 함수
const check = () => {
  const isValid = validator.value.validateAll();
  if (isValid) {
    // 모두 validation이 통과 되었을 경우 로직
    console.log('Validation passed');
  }
};

// 화면상의 validation 초기화 함수
const clear = () => {
  // 값을 지우는게 아니라 화면상의 validation 만 초기화 합니다.
  validator.value.clearAll();
};

</script>

---

🎨 스타일 클래스

클래스 이름	설명
.sc-validator	최상위 래퍼 클래스

---