TodoList ver.3
<script>
const todolist = [
{job:"영화보기", done:false, date:new Date(2021,11,25)},
{job:"주말산책", done:true, date:new Date(2021,11,26)}
];
let $tbody = undefined;
function addTodo(task, taskDay){
const todo = {job:task, done:false,
date:new Date(taskDay.substr(0,4),
taskDay.substr(5,2)-1, taskDay.substr(8,2))};
todolist.push(todo);
printTodoList();
}
function printTodoList()P
$tbody.empty();
$.each(todolist, function(idx, todo){
const $tr = $('<tr>').appendTo($tbody);
$('<td>').attr('class','job').text(todo.job)
.attr('data-idx', idx).appendTo($tr);
if(todo.done==true){
const $td = $('<td>').text('(완료)').appendTo($tr);
$td.prev().addClass('done');
$td.addClass('done');
} else {
const $td = $('<td>').text('').appendTo($tr);
$td.prev().removeClass('done');
$td.removeClass('done');
}
$('<td>').text(todo.data.toLocaleDateString().appendTo($tr);
$('<td>').attr('class','close').text('X').appendTo($tr);
});
}
$(document).ready(function(){
$tbody = $('#list');
const pattern = /[0-9]{4}-[0-9]{2}-[0-9]{2}/;
printTodoList();
$('#task').keyup(function(e){
if($(#task).val()===''){
alert('할일은 필수입력입니다.');
return;
if(pattern.test($('#task_day').vla())===false){
alert('날짜는 필수입력입니다.');
return;
}
}
if(e.keyCode=13){
addTodo($('#task').val(), $('#task_day').val());
$('#task').val('');
printTodoList();
}
});
$('#add').click(function(){
if($('#task').val()===''){
alert('할 일은 필수입력입니다');
return;
}
if(pattern.test($('#task_day').val()===false){
alert('날짜는 필수입력입니다.');
return;
}
addTodo($('#task').val(), $('#task_Day').vla());
$('#task').val('');
printTodoList();
});
$('#todo_table').on('click','.job',function(){
todolist[$(this).data('idx')].done
=!todolist[$(this).data('idx')].done;
printTodoList();
});
$('#todo_table').on('click','.close',function(){
todolist.splice($(this).data('idx'),1);
printTodoList();
});
});
</script>
</head>
<body>
<div id='app'>
<div class='form-group'>
<input type="text" class="form-control" id="task"
placeholder='할 일을 입력하세요'>
</div>
<div class="form-group">
<input type="date" class="form-control" id="task_day">
<button type="button" class="btn btn-primary" id='add'>추가
</button>
</div>
<table id='todo_table'>
<thead>
<tr>
<th>할 일</th><th>상태</th><th>날짜</th><th></th>
</tr>
</thead>
<tbody id='list'>
</tbody>
</table>
</div>
</body> 자주 사용하는 정규표현식 Top 20
영문자 소문자, 숫자, "-", "_" 로만 구성된 길이 2 ~ 10자리 사이 문자열
/^[a-z0-9_-]{2,10}$/
신용카드 번호
19자리 숫자와 "-": /^[0-9-]{19}$/
4-4-4-4 체크: /^[0-9]{4}[-\s.]?[0-9]{4}[-\s.]?[0-9]{4}[-\s.]?[0-9]{4}$/
영문자 대소문자와 숫자로만 구성
/[a-zA-Z0-9]/
전화번호
3자리-3~4자리-4자리(사이에 1자 아무거나 가능)): /^[(]?[0-9]{3}[)]?[-\s.]?[0-9]{3,4}[-\s.]?[0-9]{4}$/
3자리-3~4자리-4자리(사이에 "-" 고정): /^\d{3}-\d{3,4}-\d{4}$/
휴대폰&전화번호: /(^02.{0}|^01.{1}|[0-9]{3})([0-9]+)([0-9]{4})/
휴대폰번호: /^01(?:0|1|[6-9])[.-]?(\d{3}|\d{4})[.-]?(\d{4})$/
UUID
/^[0-9a-fA-F]{8}\b-[0-9a-fA-F]{4}\b-[0-9a-fA-F]{4}\b-[0-9a-fA-F]{4}\b-[0-9a-fA-F]{12}$/
아스키II 코드만
/[ -~]/
이메일주소
기본체크: /^([a-z0-9_.-]+)@([\da-z.-]+).([a-z.]{2,6})$/
RFC5322: /\b[\w.!#$%&’*+\/=?^`{|}~-]+@[\w-]+(?:.[\w-]+)*\b/
패스워드
최소 8자 이상으로 영문자 대문자, 영문자 소문자, 숫자, 특수문자가 각각 최소 1개 이상:
/^(?=.?[A-Z])(?=.?[a-z])(?=.?[0-9])(?=.?[#?!@$ %^&*-]).{8,}$/
최소 8자 이상으로 숫자, 특수문자가 각각 최소 1개이상:
/^(?=.?[0-9])(?=.?[#?!@$ %^&*-]).{8,}$/
URL
프로토콜 포함: /https?:\/\/(www.)?[-a-zA-Z0-9@:%._+~#=]{2,256}.[a-z]{2,6}\b([-a-zA-Z0-9@:%_+.~#()?&//=]*)/
숫자만인지 체크
^((?+?[0-9])?)?[0-9_- ()]$
숫자와 영문자 대소문자만
공백없는 숫자와 영문자 대소문자: /^[a-zA-Z0-9]*$/
공백포함 숫자와 영문자 대소문자: /^[a-zA-Z0-9 ]*$/
영문자 대소문자: /[a-zA-Z]/
년월일
yyyy-mm-dd: /^(19|20)\d\d([- /.])(0[1-9]|1[012])\2(0[1-9]|[12][0-9]|3[01])$/
특수문자와 공백 선택
한글포함 특수문자와 공백: /[^?a-zA-Z0-9/]/
한글제외 특수문자와 공백: /[^-가-?a-zA-Z0-9/ ]/
주민등록번호
/^[-A-Za-z0-9_]+[-A-Za-z0-9_.][@]{1}[-A-Za-z0-9_]+[-A-Za-z0-9_.][.]{1}[A-Za-z]{1,5}$/
