[05.03] 유효성 검사

• 유효성 검사
• 회고

---

📌 유효성 검사

유효성 검사란?

: 사용자가 폼 페이지에서 입력한 데이터 값이 서버로 전송되기 전에 특정 규칙에 맞게 입력되었는지 검사

• 회원가입 페이지 (아이디, 이메일, 비밀번호)
• 비밀번호는 n 자릿수 이상이어야 하고, 숫자나 특수문자를 반드시 포함
• 신용카드의 경우, 입력한 신용카드의 번호가 유호한지 검사
  

1. html요소로 폼 페이지 만들기

- hide : 자바스크립트를 이용해서 해당 class가 숨겨졌다 보여지게 함

<div class="success-message hide">사용할 수 있는 아이디입니다</div>
<div class="failure-message hide">아이디는 네 글자 이상이어야 합니다</div>
<div class="error-message hide">아이디는 숫자와 영어만 사용 가능합니다</div>

2. css로 꾸며주기 (화면에서 사라지게 하는 방법 display : none)

.hide {
display : none;
}

3. css display 속성을 자바스크립트로 조작하는 방법

let elInputUsername = document.querySelector('#username')
let elFailureMessage = document.querySelector('.failure-message')
let elSuccessMessage = document.querySelector('.success-message')
let elInputPassword = document.querySelector('#password')
let elInputPasswordRetype = document.querySelector('#password-retype')
let elMismatchMessage = document.querySelector('.mismatch-message')
let elErrorType = document.querySelector('.error-message')
let elCondition = document.querySelector('.password-condition')
      
//아이디가 4글자 이상이어야하고 영어와 숫자로 이루어져야한다는 함수
elInputUsername.onkeyup = function () {
if (isMoreThan4Length(elInputUsername.value) && onlyNumberAndEnglish(elInputUsername.value)) {
	elSuccessMessage.classList.remove('hide');
	elFailureMessage.classList.add('hide');
	elErrorType.classList.add('hide');
} else {
	elSuccessMessage.classList.add('hide');
	elFailureMessage.classList.remove('hide');
	elErrorType.classList.remove('hide');
	}
}
      
//4글자 이상인 경우를 위한 함수
function isMoreThan4Length(value) { 
	return value.length >= 4
}
      
//영어와 숫자로 이루어져야한다는 함수
function onlyNumberAndEnglish(str) {
	 return /^[A-Za-z][A-Za-z0-9]*$/.test(str);
}
      
//비밀번호와 비밀번호 확인 폼이 일치하는지 확인을 위한 함수
elInputPasswordRetype.onkeyup = function () {
if (isMatch(elInputPassword.value,elInputPasswordRetype.value)) {
	elMismatchMessage.classList.add('hide')
	} else {
		elMismatchMessage.classList.remove('hide')
		}
      }
elInputPassword.onkeyup = function () {
	if (strongPassword(elInputPassword.value)) {
	elCondition.classList.add('hide') 
	} else { 
		elCondition.classList.remove('hide')
		}
      }
      
//비밀번호 함수를 입력했을때 두개의 수가 맞는지를 보여주는 함수
function isMatch (password1, password2) {
	if (password1 === password2) {
		return true
	} else { 
		return false
		}
	}
      
function strongPassword(str) {
	return /^(?=.*[A-Za-z])(?=.*\d)(?=.*[@$!%*#?&])[A-Za-z\d@$!%*#?&]{8,}$/.test(str);
}

---

🙋🏻‍♀️회고

쉬우면서 어려운…ㅠㅠ