[WebOrder] vuetify rules 사용

 

vuetify 를 이용해서 rules 을 적용할 수 있다.

 

template 에서는 rules:[] 형태로 쓸 수 있다.

 

ex) :rules = "[requiredRule]"

const requiredRule = (v) => !!v || '필수 입력 항목입니다.'; 

const engNameRule = (v:string) => { 
 if(!v) return true; 
 return /^[A-Za-z]+$/.test(v) || '영문자(-,_)만 입력 가능합니다.'; 
}

const priceRule = (v) => { 
  if (v === '' || v === null) return true; 
  return !isNaN(v) || '숫자만 입력 가능합니다.'; 
  };

 

<CodeHelp
    :master-seq="5"
    :is-filter="true"
    v-model="itemData.itemUnit"
    :rules="[requiredRule]">
</CodeHelp>

 

 

이런 식으로 함수 형태로 각각 rules 를 지정해서 나눠서 써도 되고,

아래처럼 한꺼번에 객체에 넣어서 하나씩 꺼내 쓸 수 도 있다.

여러 rule을 동시에 적용할 수도 있다.

 

ex)

:rules = "[rules.속성명]"

:rules = "[rules.속성명, rules.속성명]"

 

const rules = {
    required: v => !!v || '필수 입력 항목입니다.',
    price: v => (v === '' || v === null || !isNaN(v)) || '숫자만 입력 가능합니다.',
    // engName: v => (!v || /^[A-Za-z]+$/.test(v)) || '영문자(-,_)만 입력 가능합니다.'
}

 

<CodeHelp
    :master-seq="5"
    :is-filter="true"
    v-model="itemData.itemUnit"
    :rules="[rules.required]">
</CodeHelp>

 

---

 

 함수 안에서 매개변수를 커스터마이징하여 사용할 수 있다.

 

const rules = {
    required: v => !!v || '필수 입력 항목입니다.',
    price: v => (v === '' || v === null || !isNaN(v)) || '숫자만 입력 가능합니다.',
    length: v => v && v.length <= 50 || '50자 이내로 작성해주세요.',
    // engName: v => (!v || /^[A-Za-z]+$/.test(v)) || '영문자(-,_)만 입력 가능합니다.'
}

 

↓

//rule을 객체로 만들어서 접근 객체.rule 이름
const rulesObj = {

    // 필수값 체크
    isRequired: (msg = "필수값입니다.") => value => !!value || msg,

    // 최소 길이 체크
    checkMinLength: (min = 6, message = "6글자 이상 입력해주세요.") =>
        value => (value && value.length >= min) || message,

    // 최대 길이 체크
    checkMaxLength: (max = 10, message = "최대 10글자까지 입력 가능합니다.") =>
        value => (value && value.length <= max) || message
};

 

---

그러나 !!!

 

조건 체크를 잘 해야한다.... 헷갈려 죽겠다 ..

 

단순하게 if문 조건 쓸 때처럼

"v.length > 50 || 메시지 출력" 라는 조건을 걸 경우

 

50보다 크냐? 가 조건이기 때문에 50보다 길이가 길어야 true가 나온다....

내가 원하는 것과 반대 상황이 되어버리죠.

 

 

논리 OR 연산자 || '필수 입력 항목입니다.' 좌항이 true → 그대로 true → 통과 좌항이 false → 우항 리턴 → 메시지 출력

 

 

- v가 null, ' ' 일 때 무조건 false니까 v.length 는 false가 나온다.

- v가 '1' 한 글자 문자일 경우 1>50 으로 false 니까 false가 나온다.

 

 

 

 

 

 

 v => !v || v.length <= 50 || '50자 이내로 작성해주세요.'

 

• 의미: 값이 없으면 통과, 값이 있으면 50자 이하인지 체크
• 순서대로:
  1. !v → 값이 없으면 true → 통과
  2. v.length <= 50 → 값이 있으면 50자 이하 체크 → true면 통과
  3. 둘 다 아니면 → 메시지 출력

✅ 특징:

• 값이 없을 때도 메시지 안 뜸 → 안전

 

---

 

 

v => v && v.length <= 50 || '50자 이내로 작성해주세요.'

 

• 의미: 값이 있고 50자 이하이면 통과
• 순서대로:
  1. v && v.length <= 50
     • 값이 없으면 v가 falsy → false → 메시지 출력
     • 값이 있으면 길이 ≤ 50 → true → 통과
  2. 길이 > 50 → false → 메시지 출력

✅ 특징:

• 값이 없으면 false → 메시지 출력
• 값이 있어야만 길이 체크 가능
• 즉, required 체크와 연결되어 있지 않으면 빈값에서도 에러가 뜸