검색창 인풋 유효성 검사의 다른 버젼!
기존 구현해뒀던 유효성 검사
새로 구현한 유효성 검사
HTML
<input type="text" id="searchBar">
<p id="warningMessage" style="display: none; color: red;">영문은 지원하지 않습니다, 한글을 입력해주세요</p>
JS
const searchInput = document.getElementById("searchBar");
const warningMessage = document.getElementById("warningMessage");
searchInput.addEventListener("input", () => {
const searchTerm = searchInput.value.toLowerCase();
const movieCards = Array.from(document.getElementsByClassName("movieCard"));
if (/^[ ㄱ-ㅎ|ㅏ-ㅣ|가-힣 ]*$/.test(searchTerm)) {
warningMessage.style.display = "block";
} else {
warningMessage.style.display = "none";
movieCards.forEach((card) => {
const title = card.querySelector(".movieTitle").textContent.toLowerCase();
card.style.display = title.includes(searchTerm) ? "block" : "none";
});
}
});
기존 코드에 if 문을 사용했다. 검색중에 한글정규표현식이 있다면 <p> 태그 (영문은 지원하지 않습니다. 한글을 입력해주세요)를 노출시키고 그렇지 않은 경우에는 영화 카드를 필터링하여 화면에 보여준다.
두 가지 다 적용시키긴 불필요한 것 같고, 둘 중 뭐가 낫겠냐고 팀원분들께 여쭤보니 기존에 구현해뒀던 swal.fire 알럿이 깔끔하고 괜찮을 것 같다고 하셔서 기존 유효성 검사로 유지하기로 했고,
사진에 보이는 것 처럼 OK 를 눌렀을 때 인풋창이 초기화되면 어떨까 하고 약간의 수정 작업을 거쳤다.
if (/[ㄱ-ㅎ|ㅏ-ㅣ|가-힣]/.test(searchTerm)) {
swal.fire({
text: "영문으로 검색해주세요!",
onAfterClose: () => {
searchInput.value = "";
}
});
SweetAlert 팝업을 닫은 후에 onAfterClose 콜백을 사용하여 인풋창을 초기화 해주는 로직.
검색창 유효성 검사 완성본 코드
const searchInput = document.getElementById("searchBar");
searchInput.addEventListener("input", () => {
const searchTerm = searchInput.value.toLowerCase();
const movieCards = Array.from(document.getElementsByClassName("movieCard"));
if (/[ㄱ-ㅎ|ㅏ-ㅣ|가-힣]/.test(searchTerm)) {
swal.fire({
text: "영문으로 검색해주세요!",
onAfterClose: () => {
searchInput.value = "";
}
});
} else {
movieCards.forEach((card) => {
const title = card.querySelector(".movieTitle").textContent.toLowerCase();
card.style.display = title.includes(searchTerm) ? "block" : "none";
});
}
});
검색했을 때 뒤의 카드들도 같이 초기화되는 문제가 있었는데, 이 문제를 해결했다.
SweetAlert를 띄운 후에도 MovieCard가 유지되도록 하기 위해 swal.fire("영문으로 검색해주세요!"); 다음에 추가적인 작업을 하지 않고 있어서 카드가 사라지는 문제였다.
if 문으로는 한글이 검색됬을 시 SweetAlert 을 띄우고, onAfterClsoe 콜벡 함수를 이용해
인풋의 벨류를 초기화 시켜줬다.
else 에는 title 이라는 변수에 movietitle 의 데이터들을 소문자로 변환하여 지정해줬고, 사용자가 입력한 값이 제목에 포함되어 있으면 display:block, 아니라면 none 해주게 코드를 짰다.
오늘은 성장했다. 이렇게 조금 씩 성장하는거다. 화이팅 김재훈.
이 글을 읽는 모든 사람들도 다 성장하는 하루를 보냈으면 좋겠다.
사실 나만 성장하고 다 멈춰있으면 좋겠음.
(샤라웃 투 양이준)
