input + button 이 있을 경우 웹 표준에 맞추기 위해서는 form 으로 감싸 주는 경우가 많음.
form 은 addEventListener 사용시 submit 이벤트와 함수를 넣어준다.
$form.addEventListener('submit', () => {
console.log('submit');
})새로고침이 되기 때문에 console 에 'submit' 이 찍히지 않는다.
❓ 왜 그럴까?
form은 화면이 새로고침 되는 기본 동작이 있으며, 이 기본 동작을 수정할 수는 없지만 기본 동작을 지울 수 있다.
$form.addEventListener('submit', () => {
event.preventDefault(); // 기본 동작 막기
console.log('submit');
})
event.preventDefault() 를 입력하면 console 창에 'submit' 이 찍힌다.
보통 이런 기본 동작이 있는 태그로는form 태그와 a 태그가 있다.
입력값 검증하기
const tries =[];
function checkInput(input) { // 검사하는 코드
if(input.length !== 4) {
return alert ('4자리 숫자를 입력해 주세요.');
}
if(new Set(input).size !==4 ){
return alert('중복되지 않게 입력해 주세요.');
}
if(tries.includes(input)) { // 이미 시도한 값
return alert('이미 시도한 값입니다');
}
return true;
}new Set 중복 배열 제거
- size : 배열의 length
HTML5 자체 검증 기능 활용
<input
required
type="text"
id="input"
minlength="4"
maxlength="4"
pattern="^(?!.*(.).*\1)\d{4}$">단, html5 로 검증하는 경우 디자인을 바꾸기 어려워서 안 쓰는 추세이다.
⭐️ pattern : 정규 표현식 (regular expression)
🔗 https://github.com/ziishaned/learn-regex/blob/master/translations/README-ko.md
