자바스크립트에서 form요소 필드 체크 방법이 궁금합니다.

Question

안녕하세요.공부중에 궁금한 사항이 생겨서 질문하게 되었습니다.자바스크립트에서 form 요소 필드 체크 방법이 궁금합니다.추가로'비밀번호를 입력해주세요', 나 '비밀번호 입력시 영어 + 숫자 + 특수기호'이런 거는 어떻게 구분하는지 궁금합니다.

탈퇴한 사용자 · Accepted Answer

안녕하세요.Form 요소의 필수 체크는 form이 전송될 때 (저장 등) submit 이벤트가 발생되는 시점에 체크하게 됩니다.순수 javascript나 jQuery, Vue 등 라이브러리에 따라서 체크하는 방식이 다를 수 있습니다.'영어 + 숫자 + 특수기호' 체크는 정규식을 이용해야 합니다.질문 html에 대한 javascript 샘플입니다.let form = document.querySelector('form');
form.addEventListener('submit', function(e) {
 e.preventDefault();
  
  let pwd = document.querySelector('[name=password]');
 if (!pwd.value) {
   alert('비밀번호를 입력해 주세요.');
    pwd.focus();
   return;
  }
  if (!/^(?=.*[a-zA-Z])(?=.*\d)(?=.*[$@$!%*#?&])[a-zA-Z\d$@$!%*#?&]{6,12}$/.test(pwd.value)) {
   alert('비밀번호는 영문, 숫자, 특수기호가 하나 이상 포함되고 6~12자리만 가능합니다.');
    pwd.focus();
   return;  
  }
  alert('전송');
});