vue-formulate

이전 코드

1. 필수입력은 모든 항목 유효성 검사
2. 기업정보, 추천인코드와 같은 선택항목 입력 시 유효성 검사
3. 회원가입버튼 클릭 후 통과되지 않은 필드들은 watch 사용해서 변경되면 유효성 검사
4. validation 오류 메세지 하드코딩
5. 항목마다 통과 여부 저장

적용 후

0. 예시

<FormulateInput
 type="text"
 placeholder="2자리 이상 입력"
 name="name"
 v-model="requireInfo.name"
 :validation="[
 ['required'],
 ['between', 1, 256],
 ['nameValidation'],
 ['lengthCondition', 3],
 ]"
 label="담당자 성함"
 error-behavior="submit"
 ></FormulateInput>

1. 제공되는 validation rule, validation messages 커스텀 가능

//Global custom validation rules
export const validationRules = {
  passwordValidation({ value }) {
    const specialSymbols =
      /[\{\}\[\]\/?.,;:|\)*~`!^\-_+<>@\#$%&\\\=\(\'\"]/.test(value);

    const allConditions = [
      isNumber(value),
      specialSymbols,
      isUpperCase(value),
      isLowerCase(value),
    ];
    let totalCount = 0;
    for (let i = 0; i < allConditions.length; i++) {
      if (allConditions[i]) {
        totalCount += 1;
      }
      if (totalCount >= 2) {
        return true;
      }
    }
    return false;
  },

  idValidation({ value }) {
    if (value.length === 0) return false;
    const specialSymbols = /[\{\}\[\]\/?,;:|\)*~`!^\+<>\$%&\\\=\(\'\"]/.test(
      value
    );

    if (specialSymbols || isKor(value) || isSpace(value)) return false;
    return true;
  },

  nameValidation({ value }) {
    const specialSymbols =
      /[\{\}\[\]\/?.,;:|\)*~`!^\-_+<>@\#$%&\\\=\(\'\"]/.test(value); // 영문포함
    if (specialSymbols || isNumber(value)) return false;
    return true;
  },

  recommendValidation({ value }) {
    const condition = /[\{\}\[\]\/?.,;:|\)*~`!^\+<>\$%&\\\=\(\'\"]/.test(value);
    if (condition || isSpace(value)) return false;
    return true;
  },
};



//Global custom validation messages
export const validationMsg = {
  required({ name }) {
    return `${validationName[name]}은 필수입력 항목입니다.`;
  },
  between({ args }) {
    return `최소 ${args[0] + 1}글자 이상, 최대 ${args[1] - 1}글자 이하`;
  },
  lengthCondition() {
    return `숫자, 특수문자는 입력하실 수 없습니다?.`;
  },
  confirm({ name, args }) {
    const condition = args[0];
    return `${validationName[condition]}와 ${validationName[name]}이 일치하지 않습니다.`;
  },
  min({ name, args }) {
    if (args[1]) {
      return `${validationName[name]}는 ${args[0]}자리 입니다.`;
    }
    return `${validationName[name]}는 최소 ${args[0]}글자 입니다.`;
  },
  email({}) {
    return `이메일 형식이어야 합니다.`;
  },
  passwordValidation({}) {
    return `영문/숫자/특수문자 2가지 이상 조합`;
  },
  idValidation({}) {
    return `영문, 숫자, 특수기호(- , _ , @)만 사용 가능합니다.`;
  },
  nameValidation({}) {
    return `숫자, 특수문자는 입력하실 수 없습니다.`;
  },
  recommendValidation({}) {
    return `영문, 숫자, 특수기호(- , _ , @ , #)만 입력 가능합니다.`;
  },
  mime({}) {
    return `jpg, png, gif 등 사진 파일만 첨부 가능`;
  },
};

Vue.use(VueFormulate, {
  locales: {
    en: validation.validationMsg,
  },
  rules: validation.validationRules,
});

2. watch 없이 live 로 validation 확인 가능
3. required 와 optional로 필수항목, 선택항목 검증

      isPass: {
        companyName: true,
        nameLength: true,
        nameCondition: true,
        number: true,
        userIdLength: true,
        userIdCondition: true,
        password: true,
        passwordCondition: true,
        passwordConfirm: true,
        vatNumber: true,
        representative: true,
        conditions: true,
        address: true,
        licenseImage: true,
        emailLength: true,
        emailCondition: true,
        recommenderLength: true,
        recommenderCondition: true,
      },