HTML의 form 형식 다룰 때 유용한 정보

1. form 형식으로 데이터 전송하기

 

form 형식에서 action을 사용하면 input에 있는 value들을 원하는 주소에 method(post, get) 방식으로 데이터를 전송할 수 있다.

<form action="/join" method="post">
    <div class="inputWrap">
        <div class="email">
            <span> Email </span> <input type="text" name="email"><br/>
        </div>
        <div class="password">
            <span> Password </span> <input type="password" name="password"><br/>
        </div>
    </div>
    <input class="sendbtn" type="submit">
</form>

 

2. form 유효성 검증하기 (JavaScript 이용)

유효성 검증

[name=' ']을 이용하면 name=' ' 와 일치하는 엘리먼트를 찾을 수 있다.

 

정규식 연산

match은 pattern값과 일치한 값을 리턴해 준다.

 

+는 1개 이상 값을 검색할 수있다.

*는 0개 이상 값 검색이므로 form 형식에 사용하기 드물 것이다.

[a-zA-Z0-9] 대괄호 안에 문자, 숫자 대문자 조건을 넣어 특수문자를 제외한 값들을 받아들이는 모습이다.

var email = document.querySelector("[name='email']").value;
	
else if(!email.match('[a-zA-Z0-9]+@[a-zA-Z0-9]+.[a-zA-Z0-9]+')){
	alert('올바른 email을 입력해 주세요');
}

 

 위와 같이 인풋값 한개 씩 가져와 검증 할 수 있지만 new FormData()를 이용해서 가져올 수 있다.

 

var formData = new FormData(form);
formData.get('email');