[vue2] 비밀번호 유효성 검사 연속문자 체크하기

비밀번호에 대한 요구 조건을 아래와 같이 정했다.

1. 최소 10자리 최대 16자리

2. 영문과 숫자 포함 필수

3. 공백과 특수문자는 미포함

 

내가 구현했던 방식은 실제 비밀번호를 입력하는 input에서 벨리데이션을 검사하고 비밀번호 확인란은 단순히 앞에 입력한 비밀번호와 일치하는지 안하는지 여부에 따져서 버튼을 활성화 시켜줬다. 

 

 

 

[invalid.js]

- 정규표현식이나 유효성 모음 파일을 별도로 분리해서 사용했다. 

export default {
 pwValid: /(?=.*[a-zA-Z])(?=.*[0-9]){10,16}$/,  
 repeatWord: ['0123456789', 'abcdefghijklmnopqrstuvwxyz','ABCDEFGHIJKLMNOPQRSTUVWXYZ'],  
 keyboard: ['1234567890', 'qwertyuiop', 'asdfghjkl', 'zxcvbnm']
}

 

 

 

[passWordForm.vue]

- password에 대한 폼영역도 회원관리가 되는 여러 페이지에서 사용이 될 수도 있을거 같아서 따로 분리해뒀다. 

- 회원가입, 비밀번호 변경, 비밀번호 찾기 등

 

이 외에도 연결된 값들이 만지만 순수하게 비밀번호와 비밀번호 확인 영역에 대한 값의 default는 pwValideError가 false이고 notTheSame의 값이 false 일 때 입력된 두개의 인풋창이 서로 일치되는 것이다. 

data() {    
  return {     
      userPassword: '',

      /*validation flag*/     
      errorPwText: '', //입력 오류 시 표기되는 메세지      
      pwValideError: false, // 오류인지 아닌지에 대한 값
      notTheSame: false, //입력한 비밀번호와 비밀번호 확인이 일치하지 않을 때 true    
   }  
},

   

 

 

 

[정규식으로 입력되는 것 외에 추가로 확인해야 할 유효성 검증]

연속 문자 체크하기 

해당 부분들은 제외하고 입력이 되어야 한다는 요구조건이 생겼다. 

 

1. 연속되는 문자와 숫자 ex) 1111, aaaa, ooooo, 등

2. 키보드에서 연속 입력되는 문자와 숫자 ex) 1234, qwertyuiop, asdfghjk, zxcvbnm 

3. 반복적으로 입력되는 문자와 숫자 ex) abcdefghijklmnopqrst... 12345678... 

 

 methods: {
   ....

    /*1, 2. 연속 문자 체크*/
    checkWord(value, chkArr) {
      for (let i = 0; i < value.length - 2; i++) {
        const sliceValue = value.substring(i, i + 3)
        // 모든 조건을 한번씩 순회
        if (chkArr.some((code) => code.includes(sliceValue))) {
          return true
        }
      }
      return false
    },

     /*3. 반복 입력 문자 체크*/
    checkRepeatWord(val) {
      const reg = /(.)\1+/
      let result
      if (reg.test(val)) {
        result = true
      } else {
        result = false
      }

      return result
    },
  },
}

 

 

 

[유효성 검증하기 - watch]

userPassword에 입력되는 value값을 하나씩 검사하는 방식으로 구현했다. 

연속문자의 체크되는 부분들이 중복되는 함수는 조건이 부합하지 않을 경우가 true이다. 실은 귀찮아서 안바꾸게 된 부분인데,, 변수명에 맞게 끼워맞춰버리다 보니  true, false를 반대로 사용해 버리게 됐다. (추후에는 좀 생각하고 변수명을... )

여튼 모든 조건이 검증이 끝나게 되면 false, false, false의 값이 나오게 된다.

정규식 조건에도 일치하고 + 연속문자 유효성검증도 끝나게 되면 비밀번호 활성화가 열리게 되는것 !

 

 watch: {    
   userPassword: {
      handler(val) {
        this.userPassword = this.userPassword.replace(/\s+/g, '') // 공백제거

        if (!invalid.pwValid.test(val)) {
          this.errorPwText = '영문과 숫자를 포함하여 최소 10자리 최대 16자리를 입력해주세요.'
          this.pwValideError = true
          this.setPw('userPw', val)
        }

        /**validation */
        // 연결되는 문자
        const iteratorWord = this.checkWord(val, invalid.repeatWord)

        // 키보드 연속문자
        const keyBoardWord = this.checkWord(val, invalid.keyboard)

        // 반복사용문자
        const repeatWord = this.checkRepeatWord(val)

        const wordChk = [iteratorWord, keyBoardWord, repeatWord]
        if (wordChk.some(i => i)) {
          this.errorPwText = '연속된 문자는 사용할 수 없습니다.'
          this.pwValideError = true
        }

        if (invalid.pwValid.test(val)) {
          if (!iteratorWord && !repeatWord && !keyBoardWord) {
            this.pwValideError = false
          }
        }
      },
    },