문제 : 아이디랑 비밀번호를 입력했을 때 조건에 부합하지 않으면 Alert를 실행!!
순서
1.알람창<p> tag 만들기 " 4자 이상 있어야 합니다.
2. hide class를 이용해서 미리 숨겨놓기
3. JS 에서 만약 input tag 의 value 값이 기존에 비어 있지만 함수가 호출되어 함수에 인자 값이 들어왔을 때 그 값이 4 미만이면 tag를 찾아 classList에 hide 를 remove() 함수를 이용한다.
4. 이 함수를 input tag에 onclick 이벤트 즉 속성이 불러졌을 때 함수를 호출(값 넣기)하는 모습을 만들면 완성
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="main.css">
</head>
<body>
<div>
</div>
<div>
<!--
1.아이디와 비밀번호를 입력하는 태그에서 만약에 아이디를 입력하지 않았으면
"아이디를 입력하지 않았습니다"
2.비밀번호를 입력하지 않았으면 "비밀번호를 입력하지 않았습니다"를 개발
순서
1.두 개의 알림 창을 만듦 //
2.그리고 hide 속성을 만들어서 숨김 //
3. js
만약에 입력을 눌렀는데 그 아이디 값이 없으면 <p1> 넣기
만약에 입력을 눌렀는데 그 비밀번호 값이 없으면 <p2> 넣기
-->
<div id="login-form">
<form >
email : <input id='email'type="email" value=""> <br>
<p class='idCheck hide'>이메일을 정확히 입력해야합니다.</p>
password: <input id='password' type="password" value="">
<p class='passCheck hide'>password를 입력하지 않았습니다.</p>
</form>
<button onclick="checkValidation(email.value); checkValidationPass(password.value)"> 로그인버튼 </button>
</div>
</div>
</body>
<script src="app.js"></script>
</html>JS
const email =document.querySelector('#email')
const password=document.querySelector('#password')
const idCheck=document.querySelector('.idCheck')
const passCheck=document.querySelector('.passCheck')
/*
순서
1.두 개의 알림 창을 만듦 //
2.그리고 hide 속성을 만들어서 숨김 //
3. js
만약에 입력을 눌렀는데 그 아이디 값이 없으면 <p1> 넣기
만약에 입력을 눌렀는데 그 비밀번호 값이 없으면 <p2> 넣기
*/
function checkValidation(value){
//만약에 들어온 값이 4개 이상이 아니면
if(value.length <=4 ){
//hide 속성 없애기
idCheck.classList.remove('hide')
passCheck.classList.remove('hide')
}else{
idCheck.classList.add('hide')
passCheck.classList.add('hide')
}
}
function checkValidationPass(value){
//만약에 들어온 값이 4개 이상이 아니면
if(value.length <=4 ){
//hide 속성 없애기
passCheck.classList.remove('hide')
}else{
passCheck.classList.add('hide')
}
}'Javascript' 카테고리의 다른 글
| 바닐라 JS 메인 사진에 랜덤하게 사진 넣기 (0) | 2021.10.28 |
|---|---|
| jQuery 기본 문법 이해 (0) | 2021.10.28 |
| 버튼 클릭했을 때 화면을 보여주거나 가리기 (0) | 2021.10.27 |
| JS 지저분한 코드 깨끗하게 바꾸는 팁!! (0) | 2021.10.26 |
| callback 함수 지옥편 promise로 극복 (0) | 2021.10.21 |
