티스토리 뷰

유료강의/국비지원

웹퍼블리셔 활용 7일차 - 폼 예제 6, 7, 8

2021bong 2021. 10. 20. 19:09

console.group(); // 콘솔에서 찍을 때 그룹 짓는 것, 그룹의 시작

console.groupEnd(); // 그룹의 끝

 

.parent(); // 부모태그를 알 수 있음

.parents(); // 부모태그들을 알 수 있음

버튼을 누르면 태그 삭제

<!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">
  <script src="http://code.jquery.com/jquery-latest.min.js"></script>
  <script defer src="./js/3-5.form.js"></script>
  <title>Document</title>
</head>
<body>
  <table>
    <thead>
      <tr>
        <th>순번</th>
        <th>제목</th>
        <th>날짜</th>
      </tr>
    </thead>
    <tbody>
    </tbody>
  </table>
</body>
</html>

 

내용 삽입

let data = [
  {num:1, title:'공지사항입니다.',date:'2021-10-20'},
  {num:2, title:'업데이트입니다.',date:'2021-10-21'},
  {num:3, title:'공지사항입니다.',date:'2021-10-22'},
  {num:4, title:'업데이트입니다.',date:'2021-10-23'},
  {num:5, title:'점검시간안내입니다.',date:'2021-10-24'}
];

$.each(data, function(i, v){
  $('table tbody').append(`
  <tr>
    <td>${v.num}</td>
    <td>${v.title}</td>
    <td>${v.date}</td>
    <td><button>지우기</button></td>
  </tr>
    `)
});

버튼을 누르면 삭제

$('tbody button').on('click', function(){
  $(this).parents('tr').remove();
});

체크박스를 누르면 전체 체크가 되게 하기

<!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">
  <script src="http://code.jquery.com/jquery-latest.min.js"></script>
  <script defer src="./js/3-5.form.js"></script>
  <title>Document</title>
</head>
<body>
  <fieldset>
    <legend>약관동의</legend>
    <div>
      <form name="join" method="get" action="https://www.naver.com">
        <p>
          <input type="checkbox" name="agree">약관동의<br>
          <textarea cols="60" rows="5"></textarea>
        </p>
        <p>
          <input type="checkbox" name="poll">설문동의<br>
          <textarea cols="60" rows="5"></textarea>
        </p>
        <input type="checkbox" name="all">
        전체동의
        <button>확인</button>
      </form>
    </div>
  </fieldset>
</body>
</html>

 

form태그에서 속성값을 받아올때

.prop();

  $(this).prop('checked') // checked에 대한 속성값 확인
$("input[name='all']").on('click', function () {
  let state = $(this).prop('checked')
  $("input[name='agree']").prop('checked', state);
  $("input[name='poll']").prop('checked', state);
});

.getAttribute()

.setAttribute()

this.checked를 사용해서 값 제어해서 바닐라 자바스크립트로도 가능

 

+

바닐라로 해보기

// let all = document.querySelector("input[name='all']")
// let agree = document.querySelector("input[name='agree']")
// let poll = document.querySelector("input[name='poll']")
// let check;
// all.onclick = function(){
//   check = this.checked,
//   console.log(check),
//   agree.setAttribute('checked', check),
//   poll.setAttribute('checked', check)
//   // this.getAttribute('checked'), // 태그에 checked 속성이 있어야함
//   // this.getAttribute('name')
// };

 

약관 동의 확인하기

$(window).on('submit', function (e) {
  e.preventDefault();
  let agree = $("input[name='agree']").prop('checked');
  let poll = $("input[name='poll']").prop('checked');
  if (!(agree && poll)) {
    alert('약관에 동의해주세요.');
    return;
  }
  join.submit();
});
// 이렇게 쓸 수도 있으나 UX를 위하여 (유저가 어디가 잘못된지 알 수 없음)
if (!(agree && poll)) {
  alert('약관에 동의해주세요.');
  return;
}

// 이렇게 쓴다
if (!agree) { // 이렇게 쓸 수도 있으나 UX를 위하여
  alert('약관에 동의해주세요.');
  return;
}
if (!poll) { // 이렇게 쓸 수도 있으나 UX를 위하여
  alert('정책에 동의해주세요.');
  return;
}

회원가입 입력 확인하기

  <fieldset>
    <legend>회원가입</legend>
    <form class="join2">
      <p>
        <label for="id">아이디</label>
        <input type="text" name="id">
      </p>
      <p>
        <label for="pw">패스워드</label>
        <input type="text" name="pw">
      </p>
      <p>
        <label for="email">이메일</label>
        <input type="text" name="email">
      </p>
      <p>
        <label for="tel">연락처</label>
        <input type="text" name="tel">
      </p>
      <input type="submit">
    </form>
  </fieldset>

 

$('.join2 input[type=submit]').on('click', function (e) {
  e.preventDefault();

  let regId = /^.*(?=^.{8,15}$)(?=.*\d)(?=.*[a-zA-Z])(?=.*[!@#$%^*&+=]).*$/; 
  let regEmail = /^[0-9a-zA-Z]([-_\.]?[0-9a-zA-Z])*@[0-9a-zA-Z]([-_\.]?[0-9a-zA-Z])*\.[a-zA-Z]{2,3}$/i
  let regPhone = /^01(?:0|1|[6-9])-(?:\d{3}|\d{4})-\d{4}$/;

  if (!regId.test($('.join2 input[name=id]').val())) {
    
    $('.join2 input[name=id]').after('아이디를 확인해주세요.');
    return;
  }
  if (!regId.test($('.join2 input[name=pw]').val())) {
    $('.join2 input[name=pw]').after('비밀번호를 확인해주세요.');
    return;
  }
  if (!regEmail.test($('.join2 input[name=email]').val())) {
    $('.join2 input[name=email]').after('이메일을 확인해주세요.');
    return;
  }
  if (!regPhone.test($('.join2 input[name=tel]').val())) {
    $('.join2 input[name=tel]').after('전화번호를 확인해주세요.');
    return;
  }
});

+

다시 누르면 삭제하기 

+

하나하나 안쓰고 반복문 돌릴 수 있지 않을까?

728x90
저작자표시

'유료강의 > 국비지원' 카테고리의 다른 글

웹퍼블리셔 활용 9일차 - ajax, fetch  (0) 2021.10.25
웹퍼블리셔 활용 8일차 - 스토리지+로드 예제 1, 2, 3  (0) 2021.10.21
웹퍼블리셔 활용 6일차 - 폼 예제 3, 4, 5  (0) 2021.10.19
웹퍼블리셔 활용 5일차 - 폼 예제 1, 2  (0) 2021.10.18
웹퍼블리셔 활용 4일차 - 스크롤 예제 3, 제이쿼리UI  (0) 2021.10.14
댓글
공지사항
최근에 올라온 글
최근에 달린 댓글
Total
Today
Yesterday
링크
TAG more
«   2024/07   »
일 월 화 수 목 금 토
1 2 3 4 5 6
7 8 9 10 11 12 13
14 15 16 17 18 19 20
21 22 23 24 25 26 27
28 29 30 31
글 보관함