Daily Front_Minhhk

[JS] 유효성검사(기본로그인폼), 이벤트객체[onsubmit, onchange, onmouse~, e.preventDefault] 본문

Code개발일지

[JS] 유효성검사(기본로그인폼), 이벤트객체[onsubmit, onchange, onmouse~, e.preventDefault]

Minhhk 2022. 11. 11. 14:51

유효성검사 - 기본 로그인 폼 적용

학습 목표

  • DOM 기초 실습을 통해, 구체적인 사용법을 익힐 수 있다.
    • querySelector를 활용하여, HTML 엘리먼트 정보를 가져올 수 있다.
    • oncilck, onkeyup 속성이나 addEventListener 메서드로 이벤트 핸들러 함수를 HTML 엘리먼트에 적용할 수 있다.
    • 이벤트 핸들러 함수에서 이벤트가 발생한 곳의 정보를 확인할 수 있다.
    • 이벤트 핸들러 함수로 유효성 검사를 실행할 수 있다.
  • 유효성 검사에 필요한 기술 요소를 익힐 수 있다.
    • 유효성 검사에 필요한 HTML 엘리먼트, CSS 속성이 무엇인지 알 수 있다.
      • 엘리먼트가 화면에 표시되거나 사라지게 만들 수 있다. (display: none)
    • 유효성 검사에서 활용할 수 있는 정규 표현식의 기초 사용법에 대해 익힐 수 있다. (advanced)
  • 관심사 분리를 적용하거나, 유효성 검사 함수를 따로 분리해서 설계할 수 있다. (advanced)

✅ 로그인 페이지 유효성검사,의 회고 기본적인 로직은 이해하겠는데 더 복잡하게 들어가서는 구글링을 하면서 참고를 해야할 거같다.. 나중에 프로젝트때 로그인,회원가입 페이지를 만들텐데 조금 더 들어가서 공부해야겠다

 

[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>유효성 검사</title>
    <link rel="stylesheet" href="global-style.css" />
    <link rel="stylesheet" href="style.css" />
    <link
      href="//spoqa.github.io/spoqa-han-sans/css/SpoqaHanSansNeo.css"
      rel="stylesheet"
      type="text/css"
    />
    <script src="validator.js"></script>
  </head>

  <body>
    <main>

    <div class="login-box">
      <div class="toplogo">
        <img
        class="logo"
        src="./images/codestates-logo.png"
        alt="CODE_STATES_LOGO"
        />
      </div>
      <form class="fieldset">
        <i class="fa-solid fa-user"></i>
        <input type="text" id="username" placeholder="아이디" />

      <div class="success-message hide">사용할 수 있는 아이디입니다</div>
      <div class="failure-message hide">아이디는 네 글자 이상이어야 합니다</div>

      <i class="fa-solid fa-lock"></i>
      <input type="password" id="password" placeholder="비밀번호" />

        <input
          type="password"
          id="password-retype"
          placeholder="비밀번호 확인"
        />

      <div class="mismatch-message hide">비밀번호가 일치하지 않습니다</div>

      <div class="signup">
        <button>회원가입</button>
      </div>
    </form>
    </div>

      <script src="script.js"></script>
    </main>
  </body>
</html>

[JS]

// 아이디
let elInputUsername = document.querySelector('#username')
let elFailureMessage = document.querySelector('.failure-message') // 실패메시지
let elSuccessMessage = document.querySelector('.success-message') // 성공메시지

// 비밀번호
let elInputPassword = document.querySelector('#password')
let elInputPasswordRetype = document.querySelector('#password-retype')
let elMismatch = document.querySelector('.mismatch-message')

// 회원가입 버튼
let btn = document.querySelector('.signup')

function isMoreThan4Length(value) {
  return value.length >= 4
}

function noLength(value) {
  return value.length = 0
}

function isMatch (password1, password2) {
  return password1 === password2
}

// 아이디 유효성 검사 함수
elInputUsername.onkeyup = function() {
  console.log(elInputUsername.value)

  if(isMoreThan4Length(elInputUsername.value)) {
    // console.log('4글자 보다 크다') ,, 성공메시지 출력
    elSuccessMessage.classList.remove('hide')

    // 실패메시지가 가려져야함
    elFailureMessage.classList.add('hide')
  } 
  else if(noLength(elInputUsername.value)){

    elSuccessMessage.classList.remove('hide')
    elFailureMessage.classList.remove('hide')
  } 
  else {
    // 성공메시지가 가려져야함
    elSuccessMessage.classList.add('hide')
    
    // console.log('짧다') ,, 실패메시지 출력
    elFailureMessage.classList.remove('hide')

  }
}

// 비밀번호 유효성 검사 함수
elInputPasswordRetype.onkeyup = function() {
  console.log(elInputPassword.value) // 비밀번호 > 값 ok
  console.log(elInputPasswordRetype.value) // 비밀번호 확인 > 값 ok

  // 값을 비교 합니다 자!
  if(isMatch(elInputPassword.value, elInputPasswordRetype.value)) {
    // 같을 때?? mismatch-message 를 hide 추가해줘서 안보이게
    elMismatch.classList.add('hide')
  } else { // 다를 때?? mismatch-message 를 hide 제거해서 보이게
    elMismatch.classList.remove('hide')
  }
}

이벤트 객체

오늘은 HTML의 <form>태그를 사용할 때 항상(?) 등장하는 action 속성과 onsubmit 이벤트 핸들러의 차이에 대해서 정리해보겠습니다.

벌써 하나는 속성이고 하나는 이벤트 핸들러라는 차이를 말해버리고 말았는데, 아무튼 차이를 알아보도록 하겠습니다.

action

action은 다음과 같은 역할을 합니다.

'form 데이터를 처리할 프로그램의 URI를 지정한다.'

URI(Uniform Resource Identifier)는 하나의 리소스를 가리키는 문자열입니다.

URL(Uniform Resource Locator)도 URI의 일종이라고 할 수 있는데요, 따라서 action에 웹 문서 링크를 문자열 형태로 작성한 다음 form의 데이터를 전송하게 되면, 브라우저의 루트(route)가 해당 웹문서로 이동하는 것을 확인할 수 있습니다. 또는 action에 서버사이드 언어인 php라던지 jsp로 작성한 문서를 지정하여 데이터를 처리하도록 하는 것도 가능합니다.

onsubmit

onsubmit은 다음과 같은 역할을 합니다.

'양식 제출 이벤트가 발생할 때의 동작을 지정한다.'

onsubmit은 <form> 태그 내부에서 <input type="submit">로 인해 발생하는 이벤트를 처리할 수가 있습니다. 이벤트 발생과 action에 지정된 URL이 적용되는 그 사이의 시점에 처리할 동작을 이 onsubmit 속성을 통해 지정할 수 있는 것입니다. 일반적으로 자바스크립트 함수를 지정하여 처리하는 게 경우가 많습니다.

action과 onsubmit 사용 예

위와 같이 코드를 작성한 다음 form 안에 있는 input을 클릭하면, action이 처리되기에 앞서 submit 이벤트에 대한 처리가 시작됩니다. 이때 test() 함수가 return되는 것으로 동작을 정해두었는데, 이 의도는 다름아닌 'test()라는 처리를 반환(return)하겠다'라는 의미로, 이렇게 하면 submit 이벤트 발생에 대하여 test() 함수가 짠하고 나타나서 동작을 하게 되는 것입니다. '왜 onsubmit에서 return 키워드를 사용한 거지'라는 의문이 드신다면, '처리를 반환한다'라는 문장에 초점을 두시면 좋을 것 같습니다.

onsubmit이 처리되면 그 다음 action이 역할을 하게 됩니다. action에는 '#'이 지정되어 있어 사실상 별다른 의미가 없는 상황이지만, 지정을 하긴 했기 때문에 '#'로의 이동이 일어나기는 일어납니다. 이때 웹페이지가 경로 이동을 하는 것을 원치 않을 경우에는 onsubmit 이벤트에서 false를 반환해주는 방법을 사용하면 됩니다(코드에서 사용한 방법). false가 반환되면 이벤트 처리를 그대로 강제 종료시키기 때문에, action이 처리되는 일은 일어나지 않습니다.

 

onchange

자바스크립트 onchange는 작성한 JS를 통해 변화가 일어났는지를 감지합니다. jQuery change 이벤트와 비슷합니다. onchange 이벤트의 사용 방법은 아래와 같습니다. 첫 번째는 html에서 사용할 때, 나머지는 js에서 사용할 때의 문법입니다.

<element onchange="myScript">

object.onchange =function(){myScript};

object.addEventListener("change", myScript);

단 마지막의 addEventListner는 익스플로러 8 이전 버전에서는 작동하지 않는 메소드입니다.

아래는 간단한 JS onchange 이벤트의 예제입니다. 예제를 실행하고 input text의 내용(non)의 내용을 바꾸면 배경색이 노란색으로 바뀝니다.

<input type="text" value="non" onchange = "hoisted(this)" />

 hoisted(obj);

function hoisted(obj) {
   obj.style.backgroundColor = 'yellow';
 }

1 onmouseenter 이벤트

  • 마우스 포인터가 요소 안으로 들어올 때(자식 포함) 발생하는 이벤트
  • 요소 밖으로 나갔다 오지 않으면 계속 발생하지 않음

2 onmouseover 이벤트

  • onmouseout 의 반대 개념
  • 마우스 포인터가 요소 안으로 들어올 때 + 자식 요소 출입시 발생하는 이벤트
  • 요소 영역을 벗어나지 않아도 자식 요소에 들어가거나 나올 때 발생함

3 onmouseout 이벤트

  • onmouseover 의 반대 개념
  • 마우스 포인터가 요소 밖으로 나갈 때 + 자식 요소 출입시 발생하는 이벤트
  • 요소 영역을 벗어나지 않아도 자식 요소에 들어가거나 나올 때 발생함

4 onmousemove 이벤트

  • 마우스 포인터가 요소 위에서 움직일 때(자식 포함) 발생하는 이벤트
  • 요소 위에서 마우스를 움직이면 계속 발생함
<HTML>
<HEAD>
<TITLE>자바스크립트를 활용한 텍스트 마우스 오버 효과</TITLE>
</HEAD>
<SCRIPT language="javaScript">
 function paragraph_onmouseover(){
1.   paragraph.innerText="안녕하세요 ^^ Do it~! 입니다.";
2.   paragraph.style.color="Blue";
 }
 
 function paragraph_onmouseout(){
      paragraph.innerText="마우스를 여기에 위치해보세요.";
      paragraph.style.color="Black";
 }
</SCRIPT>
<BODY>
 3. <P ID=paragraph onmouseover=paragraph_onmouseover() onmouseout=paragraph_onmouseout()>
      마우스를 여기에 위치해보세요.
 </P>
</BODY>

</HTML>

https://runtoyourdream.tistory.com/215

 

[자바스크립트] 'onmouseover', 마우스 오버 효과 - 글씨 바꾸기!

onmouseover ▶▷ 알아두면 좋은 것들 BOM, 스타일 시트, event-onmouseover, event-onmouseout, 마우스오버에 대한 개념 이번 글에서는 마우스가 글씨 위에 위치할 시에 마우스 오버 효과로 글씨를 바꾸는 것을

runtoyourdream.tistory.com

 

 

preventDefault 란?

a 태그나 submit 태그는 누르게 되면 href 를 통해 이동하거나 , 창이 새로고침하여 실행됩니다.

preventDefault 를 통해 이러한 동작을 막아줄 수 있습니다.

주로 사용되는 경우는

1. a 태그를 눌렀을때도 href 링크로 이동하지 않게 할 경우

2. form 안에 submit 역할을 하는 버튼을 눌렀어도 새로 실행하지 않게 하고싶을 경우 (submit은 작동됨)

 

 

quiz

아래 예제의 button을 클릭했을 때 "코드스테이츠에 오신 것을 환영합니다"라는 안내창을 띄우기 위한 적절한 방법을 모두 고르세요. (정답 2개)

<body>
   <div>
    <div>hello</div>
    <div id="world">world</div>
    <span id="code">code</span>
    <span>states</span>
    <button id="apply">apply</button>
  </div>
</body>

→ 정답

  • 1
function displayAlert() {
  alert('코드스테이츠에 오신 것을 환영합니다')
}
document.querySelector('#apply').onclick = displayAlert
  • 2
document.querySelector('#apply').addEventListener('click', function(){
   alert("코드스테이츠에 오신 것을 환영합니다")
})

6번 문제에서 HTML에 삽입 한 aElement를 HTML에서 제거하기 위한 올바른 방법을 모두 고르세요.

<body>
   <div>
    <div>hello</div>
    <div id="world">
      world
      <a id="javascript"></a>
    </div>
    <span id="code">code</span>
    <span>states</span>
  </div>
</body>

<script>
let aElement = document.createElement('a')
aElement.setAttribute('id', 'javascript')
aElement.textContent = 'awesome'
</script>

onKeydown(KeyCode 값) : 사용자가 키보드의 키를 눌렀을 때

onKeyup(KeyCode 값) : 사용자가 키보드의 키를 눌렀다가 땠을 때

onKeyPress(ASCII 값) : 사용자가 키보드의 키를 눌렀을 때

→

onkeyup 은 value(텍스트)가 입력된 후 이벤트가 실행된다.

반대로 onkeydown과 onkeyPress은 value(텍스트)가 입력되기전에 이벤트가 실행된다.

저작자표시

'Code개발일지' 카테고리의 다른 글

[HTML_CSS_JS] 나만의 아고라 스테이츠 만들기👏🏻  (0) 2022.11.15
[GIT] Git협업하기  (0) 2022.11.15
[JS] DOM과JS, createDocumentFragment(), node vs element, children과 childNodes의 차이, children과 childNodes의 차이, appendChild()  (0) 2022.11.10
[JS] DOM[createElement(), append(), querySelector(),setAttribute(’속성명’, ’속성값’), remove() ]  (0) 2022.11.10
[JS] koans 복습[(암묵,명시)타입변환, 호이스팅, 화살표함수, …etc]  (0) 2022.11.09
'Code개발일지' Related Articles more