[JavaScript] autofocus와 유효성 검사 (정규 표현식 검사)

1. AutoFocus 기능

사용자의 페이지 진입 시, 제일 먼저 입력해야 하는 아이디 입력 박스에 자동으로 focusing하는 기능이다.

두 가지 방법으로 구현 가능하다.

 

1) 페이지 로드되었을 때 돔 요소에 focus라는 이벤트 핸들러를 바인딩

• 대상 : id 입력 인풋 박스
• 이벤트 : 페이지의 로드
• 핸들러(이벤트 발생 시 실행될 콜백 함수) : focus()

const $id = document.getElementById("id");
window.addEventListener("load", ()=> $id.focus());

 

2) HTML의 인풋 박스 태그의 autofocus 속성을 true로 설정

<input type="text" placeholder="아이디를 입력해주세요" id="id" autofocus="true" />

---

2. 유효성 검사 (정규 표현식 검사)

인풋 박스에 입력되는 값에 제한 조건을 걸어 유효하지 않은 값일 경우 에러 메세지를 띄운다. 

 

a. 제한 조건을 위반할 시, 에러 메세지를 띄울 페이지 공간에 div 태그를 작성

<input type="text" placeholder="아이디를 입력해주세요" id="id" autofocus="true" /> <br />
<div id="id-msg"></div> 
// 값이 유효하지 않을 시 에러 메세지 삽입될 div 태그 추가
<input type="password" placeholder="비밀번호를 입력해주세요" id="password" /> <br />
<div id="pw-msg"></div> 
// 값이 유효하지 않을 시 에러 메세지 삽입될 div 태그 추가
<input type="submit" value="로그인" class="btn" id="submit" /> 
<input type="button" onclick="window.open('join.html')"; value="회원가입" class="btn" />

 

b. 제한 조건을 자바스크립트 정규 표현식으로 작성하여 새로운 RegExp객체 생성

// ID는 5~20자의 영문 소문자, 숫자와 특수기호(_),(-)만 입력 가능합니다.
var ID_REGEX = new RegExp("^[a-z0-9_-]{5,20}$"); 
// 비밀번호는 8~16자의 영문 대소문자, 숫자만 사용 가능합니다.
var PW_REGEX = new RegExp("^[A-Za-z0-9]{8,16}$");
// -----> ID_REGEX.test(인풋 박스 입력 값)하면 true or false로 리턴

https://regexr.com/를 참조

 

c. 테스트 결과가 false일 경우 감지하여 에러 메세지 띄우는 코드 작성

const checkIdValidation = function(value) {
	let isValidId
    isValidId = ID_REGEX.text(value) ? true : 'invalid'
    // 결과 값이 true면 true 리턴, false면 'invalid' 리턴
    if(isValidId !== true) {
    	$id.style.border = "1px solid red";
        $idmsg.innerText = "5~20자의 영문 소문자, 숫자와 특수기호(_),(-)만 사용 가능합니다."
    } else {
        $id.style.border = "1px solid white";
    	$idmsg.remove();
    }
}

 

d. 에러 메세지를 1) '박스가 비어있을 때' 2) '박스가 비어있지는 않지만 유효한 값이 아닐 때'로 분기 처리 

• d-1. 전역에 required와 invalid라는 두 가지 key를 가진 object 생성 :) 박스가 비어있을 떄는 required, 박스가 비어있지 않지만 유효한 값이 아닐 때는 invalid를 띄워줄 것임.

const ID_ERROR_MSG = { 
required: '필수 정보입니다.',
invalid: '5~20자의 영문 소문자, 숫자와 특수기호(_),(-)만 사용 가능합니다.', 
    }

• d-2. 유효성 검사 함수 안에 맨 처음 검사할 '박스가 비어있는 경우'를 추가하고, 비어있을 경우 오브젝트의 required key에 해당하는 value 값 에러 메세지로 띄워줌

const checkIdValidation = function(value) {
	let isValidId
	if(value.length === 0) { // 1. 박스가 비어있는 경우
        isValidId = 'required' 
        //  2. 변수를 알맞은 키 값으로 바꿔줌
        $id.style.border = "1px solid red";
        $idmsg.innerText = ID_ERROR_MSG[isValidId] 
        // 3. 생성한 오브젝트의 required에 해당하는 vlaue 값을 innerText
    } else { ......

• d-3. '박스가 비어있는 경우'가 false이면, 정규 표현식을 위반하는지 검사한 후 위반이면 오브젝트의 invalid key에 해당하는 value 값 에러 메세지로 띄워줌

 else {
        isValidId = ID_REGEX.test(value) ? true : 'invalid' 
        // 1. test 결과가 true면 true를 주고, false면 invalid
        if(isValidId !== true) // 2. isValidId가 flase일 경우
        $id.style.border = "1px solid red";
        $idmsg.innerText = ID_ERROR_MSG[isValidId] 
        // 3.생성한 오브젝트의 invalid에 해당하는 
        // vlaue 값을 innerText
        } else {
        $id.style.border = "1px solid white";
	    $idmsg.remove();
       	}
     }
 }

 

[기능 구현]

[좌] 박스가 비어있어 required에 해당하는 메세지가 뜬 경우, [우] 유효하지 않은 값을 넣어 invailid에 해당하는 메세지가 뜬 경우 

 

 

가입 페이지는 준비중 :)

 

 

ref.

라이언 SVG 디자인의 출처는 https://taegon.kim/archives/9658