유효성 검사
회원가입
아이디 비밀번호 비밀번호 확인 회원가입<JS file>
// 아이디 유효성
elInputUsername.onkeyup = function () {
console.log(elInputUsername.value)
if(isMoreThan4Length(elInputUsername.value)) {
elSuccessMessage.classList.remove('hide')
elFailureMessage.classList.add('hide')
}
else {
elSuccessMessage.classList.add('hide')
elFailureMessage.classList.remove('hide')
}
}
// 비번 유효성
elInputPasswordCh.onkeyup = function() {
if(isMatch(elInputPassword.value, elInputPasswordCh.value)){
elMistmatch.classList.add('hide')
elMatch.classList.remove('hide')
}else{
elMatch.classList.add('hide')
elMistmatch.classList.remove('hide')
}
}
function isMoreThan4Length(value) {
return value.length >= 4
// TODO : 동영상 강의를 보고 이 함수를 완성하세요.
}
function isMatch (password1, password2) {
return password1 === password2
// TODO : 동영상 강의를 보고 이 함수를 완성하세요.
}- input tag의 값 바꾸기 (value)
<javascript>
let elInputUsername = document.querySelector('#username')
elInputUsername.value = '아이디를 입력하세요'
- 시각적 피드백 HTML 작성
메세지가 보이게는 html에 다 넣어야 합니다.
<html>
<fieldset id = "userinfo">
<label>아이디</label>
<input type="text" id="username">
<div class="failure-message">아이디는 네 글자 이상이어야 합니다</div>
<div class="success-message">사용할 수 있는 아이디입니다.</div>
</fieldset>- CSS display 속성을 자바스크립트로 조작하는 방법
(1) CSS파일에 원하는 클래스(hide)에 display 속성을 추가합니다.
<CSS>
.hide {
display: none;
}(2) css 정한 display 속성을 html에서 구현하려는 곳에 추가합니다.
<html>
<fieldset id = "userinfo">
<label>아이디</label>
<input type="text" id="username">
<div class="failure-message hide">아이디는 네 글자 이상이어야 합니다</div>
<div class="success-message hide">사용할 수 있는 아이디입니다.</div>
</fieldset>(3) javascript에서 맞는 값을 치면, 성공메세지에 hide를 지우고, 실패메세지에 hide를 추가합니다.
<javasscript>
elSuccessMessage.classList.remove('hide')
elFailureMessage.classList.add('hide')- 이벤트 및 이벤트 핸들러의 개념
이벤트: 우리가 프로그램에서 어떠한 행동을 할때 라고 생각하면 된다. (ex 클릭을 할때, 마우스를 가져다 댈때)
이벤트 핸들러: 그때 진행되는 함수
- keyup 이벤트
<javascript>
elInputUsername.onkeyup
//onkeyup : 키보드가 눌렀다가 때어졌을때
그밖에 여러 이벤트가 있다.
이벤트와 관련된 속성은 on이라는 접두어가 붙는다. (onclick, onkeydown 등)- 입력 값 가져오기 (변수.value)
<javascript>
elInputUsername.valueelInputUsername.onkeyup = function () {
if(isMoreThan4Length(elInputUsername.value)) {
elSuccessMessage.classList.remove('hide')
elFailureMessage.classList.add('hide')
}
else {
elSuccessMessage.classList.add('hide')
elFailureMessage.classList.remove('hide')
}
} - dom을 통해서 이벤트 핸들러를 가져오는 방법
(1)
btn.onclick = function() {
console.log('버튼이 눌렸습니다!');
}
elInputUsername.onkeyup = function () {
if(isMoreThan4Length(elInputUsername.value)) {
elSuccessMessage.classList.remove('hide')
elFailureMessage.classList.add('hide')
}
else {
elSuccessMessage.classList.add('hide')
elFailureMessage.classList.remove('hide')
}
}
(2)
btn.addEventListener('click', function() {
console.log('버튼이 눌렸습니다!');
});
elInputUsername('keyup', function () {
if(isMoreThan4Length(elInputUsername.value)) {
elSuccessMessage.classList.remove('hide')
elFailureMessage.classList.add('hide')
}
else {
elSuccessMessage.classList.add('hide')
elFailureMessage.classList.remove('hide')
}
}
(3)
function handler() {
console.log('버튼이 눌렸습니다!');
}
btn.onclick = handler;
btn.onclick = handler(); -> 이렇게 쓰면 안된다.(X)
function 4length() {
if(isMoreThan4Length(elInputUsername.value)) {
elSuccessMessage.classList.remove('hide')
elFailureMessage.classList.add('hide')
}
else {
elSuccessMessage.classList.add('hide')
elFailureMessage.classList.remove('hide')
}
}
elInputUsername.onkeyup = 4length;
elInputUsername.onkeyup = 4length(); -> 이렇게 쓰면 안된다.(X)참고 : 코드스테이츠
끝까지 ... 가면 된다.