[Vue.js]비밀번호에 대한 정규식 rule 적용방법 : 8자 이상, 숫자 1개 이상, 소문자 및 대문자와 특수 문자를 모두 포함시키는 방법

떠돌이개발자Jul 6, 2023

비밀번호에 대한 정규식 rule 적용 예제

<v-form
  ref="refForm"
  v-model="data.item"
  lazy-validation
>
    <v-row class="pt-0 mx-0">
      <v-col class="py-0 px-2"
        cols="12" lg="12" md="12" sm="12" xs="12">
        <label class="pt-2">새 비밀번호</label>
          <v-text-field
            hide-details="auto"
            v-model="data.newPassword"
            dense
            outlined
            single-line
            append-icon="mdi-eye-off"
            type="password"
            class="pt-1"
            oninput="javascript: this.value = this.value.replace(/[ㄱ-ㅎ|ㅏ-ㅣ|가-힣]/g, '' );"
            :rules="passwordRules(data.newPassword, data.newPassword2)"
          ></v-text-field>
      </v-col>
    </v-row>
	<v-row class="pt-0 mx-0">
      <v-col class="py-0 px-2"
        cols="12" lg="12" md="12" sm="12" xs="12">
        <label class="pt-2">새 비밀번호 확인</label>
          <v-text-field
            hide-details="auto"
            v-model="data.newPassword2"
            dense
            outlined
            single-line
            append-icon="mdi-eye-off"
            type="password"
            class="pt-1"
            oninput="javascript: this.value = this.value.replace(/[ㄱ-ㅎ|ㅏ-ㅣ|가-힣]/g, '' );"
            :rules="passwordRules(data.newPassword, data.newPassword2)"
          ></v-text-field>
      </v-col>
    </v-row>
<v-form>

import { rules } from '@/assets/mixin/rules';

export default {
  name: 'TestUser',
  mixins: [
    rules,
  ],
  data: () => ({
    data: {
      item: true,
      newPassword: '',
      newPassword2: '',
    },
  }),
  mounted() {
  	// 벨리데이션 체크 초기화
    this.$refs.refForm.resetValidation();
  },
  methods: {
    save() {
      const isValidate = this.$refs.refForm.validate();
      if (!isValidate) {
        return;
      }

      if (!this.validation()) {
          return;
      } 
      ...벨리데이션 체크 후 axios 호출
      
      
  .....생략....

[rule.js]

export const rules = {
  methods: {
    passwordRules(str, str2) {
      const text = str !== undefined ? str.trim() : undefined;
      const text2 = str2 !== undefined ? str2.trim() : '';
      if (text === undefined) {
        return [];
      }

      return [
      	value => !!value || `새 비밀번호를 입력하세요.`,
        value => !(value && text !== text2) || '비밀번호 변경시 동일한 비밀번호를 입력해주세요.',
        value => !(value && value.length <= 7) || '8자 이상 입력해주세요.',
        value => !!(value && /d/.test(value)) || '숫자를 포함하여 입력해주세요.',
        value => !!(value && /[A-Za-z]/.test(value)) || '문자를 포함하여 입력해주세요.',
        value => !!(value && /[^A-Za-z0-9]/.test(value)) || '특수문자를 포함하여 입력해주세요.',
        value => !!(value && /[A-Z]{1}/.test(value)) || '대문자 1개를 포함하여 입력해주세요.',
      ];
    },
    notEmptyRules(str) {
      const text = str.trim();
      return [
        value => !!value || `${text}은(는) 필수입력입니다.`,
      ];
    }, 
};    

export default { rules };

이메일 체크 정규식 rule

    emailRules() {
      return [
        v => !v || /^w+([.-]?w+)*@w+([.-]?w+)*(.w{2,3})+$/.test(v) || '메일 형식이 잘못 되었습니다.',
      ];
    },

숫자만 입력 정규식 rule

    checkNumberRules() {
      return [
        v => !!(v && /^[0-9]*$/.test(v)) || '숫자만 입력 가능합니다.',
      ];
    },

글자 수 입력제한 정규식 rule

    checkMaxLengthRules(val) {
      return [
        v => !(v && v.length >= val) || `${val} 자리 까지만 입력 가능합니다.`,
      ];
    },

IP 주소 체크 정규식 rule

    checkIpAddressRules() {
      return [
        v => !v || /^[0-9]*$/.test(v) || '숫자만 입력 가능합니다.',
        v => !v || (Number(v) >= 0 && Number(v) <= 255) || '0~255 까지만 입력 가능합니다.',
      ];
    },

사업자번호 체크 정규식

    getCorporateRegNumRules(str, val) {
      return [
        v => !(v && v.length > val) || `${val} 자리 까지만 입력 가능합니다.`,
        v => !v || /^[0-9]{3}-[0-9]{2}-[0-9]{5}$/.test(v) || '유효한 사업자번호를 입력하세요.(110-11-11111)',
      ];
    },

각종 전화번호 체크 정규식

    getneRules(str, val) {
      return [
        v => !(v && v.length > val) || `${val} 자리 까지만 입력 가능합니다.`,
        v => !v || /^(0[2-8][0-5]?)-?([1-9]{1}[0-9]{2,3})-?([0-9]{4})$/.test(v) || '전화번호를 정확하게 입력하세요.( "-"하이픈 포함 )',
      ];
    },
    getMobeRules(str, val) {
      return [
        v => !(v && v.length > val) || `${val} 자리 까지만 입력 가능합니다.`,
        v => !v || /^(01[016789]{1}|02|0[3-9]{1}[0-9]{1})-?[0-9]{3,4}-?[0-9]{4}$/.test(v) || '휴대폰번호를 정확하게 입력하세요.( "-"하이픈 포함 )',
      ];
    },
    getRules(str, val) { // 유전 전화 + 휴대폰 번호
      return [
        v => !(v && v.length > val) || `${val} 자리 까지만 입력 가능합니다.`,
        v => !v || /^(0[2-8][0-5]?|01[01346-9])-?([1-9]{1}[0-9]{2,3})-?([0-9]{4})$/.test(v) || '전화번호(휴대폰 포함)를 정확하게 입력하세요.( "-"하이픈 포함 )',
      ];
    },
    
    getMainPRules(str, val) { // 대표전화번호 1588 등
      return [
        v => !(v && v.length > val) || `${val} 자리 까지만 입력 가능합니다.`,
        v => !v || /^(1544|1566|1577|1588|1644|1688)-?([0-9]{4})$/.test(v) || '대표전화를 정확하게 입력하세요.( "-"하이픈 포함 )',
      ];
    },

한글 입력 제한 정규식

checkUserIdRules(str) {
  const text = str;
  return [
    v => !!v || `${text}를 입력하십시오.`,
    v => !/[ㄱ-ㅎ|ㅏ-ㅣ|가-힣]/.test(v) || `${text}는 한글을 입력할 수 없습니다.`,
  ];
},

[REFERENCE]