Username의 유효성 검사
이번 강의에서는 유저이름(username)의 유효성을 검사할거다.
유저이름은 비어있으도 안되고, 너무 길어도 안된다.
우리는 조건문을 통해 유저이름 즉, loginInput.value을 계속 언급할거기 때문에, 변수로 지정해준다!!
const loginInput = document.querySelector("#login-form input"); const loginButton= document.querySelector("#login-form button"); function onLoginBtnClick(){ const username = loginInput.value; if(username ===""){ alert("Please write your name"); } else if(username.length > 15){ alert("Your name is too long.") } } loginButton.addEventListener("click",onLoginBtnClick);
이렇게 작업을 하긴 했지만 니꼬가 선호하는 방법은 아니다. JS만으로 작업 시에는 해야만 하는 작업이지만, 브라우저 자체의 기능이 있다면 그걸 사용할 수도 있다. 지금 이대로가 나쁘다는거 아니다.ㅇㅇ
항상 유저가 입력하는 값의 유효성을 확인하는건 좋은 연습이다. 절대 유저를 믿지마 (ㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋ)
하지만 말했듯이 항상 최고의 툴을 사용해야 하고 이미 가지고 있는 기능들을 사용하는게 좋다.
input에는 required ,maxlength등 기본적으로 주어지는 기능들이 있다. 그리고 input의 유효성 검사를 작동시키기 위해서는 div가 아닌 form을 쓰는게 더 좋다. input이 form안에 있어야 됨ㅇㅇ
<form id="login-form"> <input required maxlength="15" type="text" placeholder="What is your name?" /> <button>Log In</button> </form>빈칸을 무조건 채워넣게 하고, 15글자 이상 넘기지 못하게 설정한다.
function onLoginBtnClick(){ const username = loginInput.value; console.log(username); }
이런식으로 html의 기본 기능을 활용해서 코드를 작성하면, 우리가 조건문을 굳이 주구장창 쓸 필요가 없다.
아무것도 안적게 되면 입력란을 작성하라고 경고문이 나오고, 15글자 이상 안적히게 설정이 된다.
문제는, 내가 버튼을 클릭하면 url 뒤에 이상한게(?ㄹㅇ 물음표가 따라 붙음ㅇㅇ)이 따라붙는다. 그리고 페이지가 새로고침 된다. 그래서 값이 사라져 버린다. 말 그대로, 내 웹사이트를 재시작 시키고 있기 때문인데, 이렇게 되는 이유는 form이 submit되고 있기 때문이다.
코코아톡 강의 : input안에 있는 button을 누르거나 type이 submit인 input을 클릭하면 내가 작성한 form이 submit 된다.
버튼을 누르지 않고, 엔터만 눌러도 내가 작성한 form이 submit 된다. 우리는 이제 버튼을 클릭하는 것에 신경 쓸 필요가 없다. 지금 하는건 HTML에 대해 공부했으면 아는 내용들일거다.
결론 : 버튼을 클릭하는게 중요한게 아니다. 우리의 관심사는 form을 submit하는 것이다.
이 순간에 우리는 브라우저가 새로고침하지 않고 유저 정보를 저장하도록 하고 싶은거다.
우리가 input을 form안에 넣었기 때문에, 엔터를 누를때마다 form은 자동적으로 submit 되고 있다. 이건 우리가 원하는게 아니다. 왜냐하면 form이 submit될 때마다 페이지는 새로고침 되기 때문이다. 웹사이트 전체를 매번 새로고침 하고 싶지는 않다!
우리는 다음 강의때, form이 submit 되는 걸 막아주도록 할거다.
