TIL: 2022-02-18

⚙️ 오늘 학습한 내용

vaniilaJS로 폼 양식 만들기

 

🐹 오늘의 기분

이력서 수정하고 조금 쉬다가 주어진 마크업을 참고해서 자바스크립트로 폼 만드는 걸 해봤다. 오늘은 해설 안 보고 전부 혼자 구현해봤는데 유효성 검사까지 총 2시간 정도 걸렸다. 기능 넣는 건 괜찮은데 역시 처음에 파일 나누고 구조 짜는게 제일 어려운 것 같다ㅠㅠ 그래도 해내니까 뿌듯하다. 

 

🗝 키워드

form

 

🗣 요약

form 제출 이벤트핸들러는 버튼 click이 아니라 form의 submit 이벤트에 등록해야한다.

이 이벤트핸들러에서 e.target.[필드 name 속성] 을 통해 form에 입력한 값을 받아올 수 있다.

input에 required 속성을 적용하면 필수 입력칸으로 설정할 수 있고, pattern에 정규표현식을 지정해 내부 문자열을 검증할 수 있다.

input의 title 속성을 통해 pattern에 맞지 않는 입력이 들어왔을 때 말풍선으로 입력 양식을 안내해줄 수 있다.

switch문에는 case마다 break를 걸어줘야 한다.

 

내가 쓴 정규표현식이 아리까리할 때는 https://regexr.com/ 에서 테스트해보자 

 

❓ 막히는 or 막혔던 부분

switch문에서 break를 안 걸어줘서 다른 값이 계속 덮어씌워졌었다.