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

Question

안녕하세요.

공부중에 궁금한 사항이 생겨서 질문하게 되었습니다.

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

추가로

'비밀번호를 입력해주세요', 나 '비밀번호 입력시 영어 + 숫자 + 특수기호'

이런 거는 어떻게 구분하는지 궁금합니다.

<form> <input type="text" name="id" value="" /> <input type="password" name="password" size="18" /> <form/>

Answer 1

안녕하세요.

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('전송'); });