프로그램/jquery, javascript2013. 12. 19. 16:32

javascript 나이 계산하기

 

<!DOCTYPE HTML>
<html>
 <head>
  <title>javascript 나이 계산</title>
  <style>
  input {height:12px;}
  p {display:inline;}
  .nb {ime-mode: disabled;}
  #y {width:30px;}
  #m, #d {width:15px;}
  #btn_age {height:20px;}
  </style>
  <script type="text/javascript">
  // 숫자 확인
  String.prototype.only_number = function(){
   return this.replace(/[^0-9]/gi, '');
  }

  // 나이 계산
  function fnAge()
  {
   var today = new Date();
   var y = document.getElementById('y').value;

   if(y == '' || y.length < 4)
   {
    alert('년도(예>1990)를 입력하세요.');
    document.getElementById('age').innerText = '?';
    document.getElementById('y').focus();
    return false;
   }

   if(Number(y) < (today.getFullYear() - 150))
   {
    alert('나이가 너무 많습니다.');
    document.getElementById('age').innerText = '?';
    document.getElementById('y').focus();
    return false;
   }

   if(Number(y) >= today.getFullYear())
   {
    alert('1살 이하입니다.');
    document.getElementById('age').innerText = '?';
    document.getElementById('y').focus();
    return false;
   }

   var m = document.getElementById('m').value;

   if(m == '' || m.length < 1 || (Number(m) < 1 || Number(m) > 12))
   {
    alert('월(예>1~12)을 입력하세요.');
    document.getElementById('age').innerText = '?';
    document.getElementById('m').focus();
    return false;
   }

   var d = document.getElementById('d').value;

   if(d == '' || d.length < 1 || (Number(d) < 1 || Number(d) > 31))
   {
    alert('일(예>1~31)을 입력하세요.');
    document.getElementById('d').focus();
    return false;
   }

   var birthday = new Date(m + '/' + d + '/' + y);
   var years = today.getFullYear() - birthday.getFullYear();

   // 현재 년도에서 생일을 재설정
   birthday.setFullYear(today.getFullYear());

   // 생일이 지났으면 -1
   if(today < birthday)
   {
    years--;
   }

   document.getElementById('age').innerHTML = years;
  }
  </script>
 </head>
<body>
 <p>생년월일 : </p>
 <input type="text" id="y" maxlength="4" class="nb" value="" onblur="this.value=this.value.only_number();" />년
 <input type="text" id="m" maxlength="2" class="nb" value="" onblur="this.value=this.value.only_number();" />월
 <input type="text" id="d" maxlength="2" class="nb" value="" onblur="this.value=this.value.only_number();" />일
 / 나이 : 만
 <p id="age">?</p>살
 <input type="button" id="btn_age" onclick="fnAge()" value="확인" />
</body>
</html>

Posted by 은둔고수
프로그램/jquery, javascript2013. 12. 19. 15:41

javascript 정규식 숫자 형식만 입력받기

 

<!DOCTYPE HTML>
<html>
 <head>
  <title>javascript 숫자 형식만 입력받기</title>
  <style>
  input {height:12px;}
  p {display:inline;}
  .nb {ime-mode: disabled;width:30px;}
  </style>
  <script type="text/javascript">
  // 숫자 확인
  String.prototype.only_number = function(){
   return this.replace(/[^0-9]/gi, '');
  }
  </script>
 </head>
<body>
 <p>숫자 : </p>
 <input type="text" id="n" maxlength="4" class="nb" value="" onblur="this.value=this.value.only_number();" />
</body>
</html> 

Posted by 은둔고수
프로그램/jquery, javascript2013. 10. 14. 11:31

jquery 자신을 포함한 html값 알아내기 - innerHTML, outerHTML

innerHTML을 사용하면 선택한 요소의 하위 요소들에 대해서만 알 수 있다. (jquery에서는 html())

자신을 포함한 하위 요소들을 알고 싶다면 outerHTML을 사용하면 된다.

하지만 IE에서만 사용할 수 있다.

 

jquery를 이용해서 자신을 포함한 하위 요소값을 알아내기

: div1을 포함한 하위 내용들을 div_view_area에 넣기

<div>

    <div id="div1" style="display:none;">

<div>내용</div>

    </div>

    <div id="div2">div2</div>

</div>

<div id="div_view_area"></div>

 

var tmp = $('#div1').clone().wrapAll('<div/>').parent().html();
$('#div1').remove();
$('#div_view_area').html(tmp);
$('#div1').show();

 

첫줄을 보면 clone()와 wrapAll()을 이용해서 div1 하위 요소를 복사한 후 새로운 div 요소를 생성해서 감싼다음 parent()로 부모요소로 이동을 했다.

그리고난후 html()을 이용해서 의도한대로 자신을 포함한 하위 요소값을 알아내서 임시 변수(tmp)에 저장을 했다.

tmp = $('#div1').clone().wrapAll('<div/>').parent().html();

 

두번째줄을 보면 remove()를 사용하는데 clone()를 이용해서 복사를 했기 때문에

세번째줄에서 div_view_area에 내용을 넣으면 같은 요소가 2개가 생성되므로 넣기전에 기존 요소를 삭제를 했다.

$('#div1').remove();

 

세번째줄에서 div_view_area 하위에 복사한 내용을 넣는다.

$('#div_view_area').html(tmp);

 

네번째줄에서 div1를 화면에 보여준다.

$('#div1').show();

 

더보기>

- jquery outerHTML 구현하기

Posted by 은둔고수
프로그램/jquery, javascript2013. 2. 6. 16:17

javascript 영문, 숫자 혼용만 사용하는 비밀번호 정규식

javascript 정규식을 이용해서 영문, 숫자 혼용만 사용하는 비밀번호 확인

//=== 영문, 숫자 혼용 확인
// 혼용이면 true, 아니면 false
function rtn_engnum_mix_chk(str)
{
 var chk_num = str.search(/[0-9]/g);
 var chk_eng = str.search(/[a-z]/ig);

 if(chk_num < 0 || chk_eng < 0)
 {
  return false;
 }

 return true;
}


//=== 영문, 숫자 확인
// 영문 또는 숫자이면 true, 아니면 false
function rtn_engnum_chk(str)
{
 for( var i = 0; i <= str.length -1 ; i++ )
 {
  if('a' <= str.charAt(i) && str.charAt(i) <= 'z' || str.charAt(i) >= '0' && str.charAt(i) <= '9'){}
  else
  {
   return false;
  }
 }

 return true;
}

 

// 확인 : 비밀번호
function passwd_chk(passwd1, passwd2)
{
 passwd1 = passwd1.trim().toLowerCase(); // javascript를 이용해서 trim() 구현하기 바로가기
 passwd2 = passwd2.trim().toLowerCase();

 var str = passwd1;

 if(passwd1.length < 6 || passwd1.length > 12)
 {
  alert ("비밀번호는 6~12자의 영문 및 숫자혼용만 사용할 수 있습니다.");
  return false;
 }

 else if(passwd1 != passwd2)
 {
  alert ("비밀번호와 비밀번호 확인이 일치하지 않습니다.");
  return false;
 }

 if(!rtn_engnum_mix_chk(str))
 {
  alert("비밀번호는 숫자와 영문자를 혼용해야 합니다.");
  return false;
 }

 if(!rtn_engnum_chk(str))
 {
  alert ("비밀번호는 영문 및 숫자로 구성되어야 합니다");
  return false;
 }

 return true;
}

 

// 비밀번호변경
function modify_pw_chk(f)
{
 f.passwd.value = f.passwd.value.trim();
 f.passwd1.value = f.passwd1.value.trim();
 f.passwd2.value = f.passwd2.value.trim();


 if(f.passwd.value == '')
 {
  alert("현재 비밀번호를 입력해주세요");
  f.passwd.focus();
  return false;
 }

 if(f.passwd.value.length < 6 || f.passwd.value.length > 12)
 {
  alert ("비밀번호는 6~12자의 영문 및 숫자혼용만 사용할 수 있습니다.");
  f.passwd.focus();
  return false;
 }

 if(!rtn_engnum_mix_chk(f.passwd.value))
 {
  alert("비밀번호는 숫자와 영문자를 혼용해야 합니다.");
  f.passwd.focus();
  return false;
 }

 if(!rtn_engnum_chk(f.passwd.value))
 {
  alert ("비밀번호는 영문 및 숫자로 구성되어야 합니다");
  f.passwd.focus();
  return false;
 }


 if(f.passwd1.value == '')
 {
  alert("새로운 비밀번호를 입력해주세요");
  f.passwd1.focus();
  return false;
 }

 else if(f.passwd2.value == '')
 {
  alert("새로운 비밀번호를 한번 더 입력해주세요");
  f.passwd2.focus();
  return false;
 }

 else if(f.passwd1.value != '' && !passwd_chk(f.passwd1.value, f.passwd2.value))
 {
  return false;
 }

 f.submit();
}

 

사용예>

<form name="f" method="post">

<input type="password" id="passwd" name="passwd" maxlength="12" style="ime-mode:disabled;" title="6~12자의 영문 및 숫자혼용" />
<input type="password" id="passwd2" name="passwd2" maxlength="12" style="ime-mode:disabled;" title="6~12자의 영문 및 숫자혼용" />
<input type="password" id="passwd3" name="passwd3" maxlength="12" style="ime-mode:disabled;" title="6~12자의 영문 및 숫자혼용" />

<a href="javascript:;" onclick="modify_pw_chk(document.f)">비밀번호변경</a>

</form>

Posted by 은둔고수
프로그램/jquery, javascript2013. 2. 6. 16:05

javascript를 이용해서 영문, 숫자 확인 (혼용) - 정규식

 

자바스크립트(javascript)를 이용해서 영문, 숫자(또는 혼용)를 확인

 

//=== 영문, 숫자 혼용 확인
// 혼용이면 true, 아니면 false
function rtn_engnum_mix_chk(str)
{
 var chk_num = str.search(/[0-9]/g);
 var chk_eng = str.search(/[a-z]/ig);

 if(chk_num < 0 || chk_eng < 0)
 {
  return false;
 }

 return true;
}


//=== 영문, 숫자 확인
// 영문 또는 숫자이면 true, 아니면 false
function rtn_engnum_chk(str)
{
 for( var i = 0; i <= str.length -1 ; i++ )
 {
  if('a' <= str.charAt(i) && str.charAt(i) <= 'z' || str.charAt(i) >= '0' && str.charAt(i) <= '9'){}
  else
  {
   return false;
  }
 }

 return true;
}

 


사용 예>

 if(!rtn_engnum_mix_chk(str))
 {
  alert("숫자와 영문자를 혼용해야 합니다.");
  return false;
 }

 if(!rtn_engnum_chk(str))
 {
  alert ("영문 또는 숫자로 구성되어야 합니다");
  return false;
 }

 

javascript를 이용해서 영문, 숫자 혼용만 사용하는 비밀번호 체크 사용 예 <- 클릭

Posted by 은둔고수
프로그램/jquery, javascript2013. 1. 23. 15:57

javascript 생년월일 - 성인, 미성년자 만 나이 체크

 

생년월일을 입력받아 자바스크립트를 이용해서 미성년자를 확인한다.

입력 양식 : 19940101(숫자만 입력)

function birthday_chk(f)
{
 f.value = f.value.only_number();

 if(f.value == '')
 {
  alert('생년월일을 작성해주세요.');
  return false;
 }

 else if(f.value.length != 8)
 {
  alert('생년월일을 정확히 작성해 주세요.\n(예. 1994년 1월 1일생 -> 19940101로 작성)');
  return false;
 }

 //=== 확인 : 생년월일 형식 // 시작

 var adt = 19; // 성년 나이
 var adt_max = 100; // 100세

 var d = new Date();
 var y = d.getFullYear();
 var m = (d.getMonth() + 1);
 var d = d.getDate();

 // 날짜 포맷 맞추기
 if(m < 10) m = '0' + m;
 if(d < 10) d = '0' + d;

 var birthday_y = parseInt(f.value.substr(0,4));
 var birthday_m = f.value.substr(4,2);
 var birthday_d = f.value.substr(6,2);
 var birthday_md = f.value.substr(4,4);

if(age < adt || (age == adt && parseInt(('1' + birthday_md)) > parseInt(('1' + m + d))))
 {
  alert('19세 미만은 이용하실 수 없습니다.');
  return false;
 }

 if(birthday_y < parseInt(y - adt_max) || (parseInt(birthday_m) < 1 || parseInt(birthday_m) > 12) || (parseInt(birthday_d) < 1 || parseInt(birthday_d) > 31))
 {
  alert('생년월일을 확인해 주세요.');
  return false;
 }
 //=== 확인 : 생년월일 형식 // 끝

 return true;
}

<form id="f" name="f">

<input type="text" id="birthday" name="birthday" maxlength="8" onblur="birthday_chk(document.f)" />

</form>

 

Posted by 은둔고수
프로그램/jquery, javascript2013. 1. 22. 17:34

javascript 정규식 필명, 닉네임 형식 체크

별명(닉네임) 입력 글자를 확인하는 자바스크립트 정규식으로

한글, 영문, 숫자만 입력할 수 있다.

 

function nick_chk(str)
{
 if(str.length < 2 || str.length > 10) {
   alert("2~10자의 한글, 영문, 숫자만 사용할 수 있습니다.");
   return false;
 }

 var chk = /[0-9]|[a-z]|[A-Z]|[가-힣]/;

 for( var i = 0; i <= str.length -1 ; i++ )
 {
  if(chk.test(str.charAt(i)))
  {
  }

  else
  {
   alert("2~10자의 한글, 영문, 숫자만 사용할 수 있습니다.");
   return false;
  }
 }

 return true;
}

 

<input type="text" id="nick" name="nick" maxlength="10" onblur="nick_chk(this.value);" />

 

Posted by 은둔고수
프로그램/jquery, javascript2012. 9. 17. 16:24

javascript 정규식 이메일 형식

자바스크립트 정규식을 이용해서 이메일을 확인할 수 있다.

 

소스>

var reg = /^([0-9a-zA-Z_\.-]+)@([0-9a-zA-Z_-]+)(\.[0-9a-zA-Z_-]+){1,2}$/;

 

사용 예:jQuery>

 <form name="f" method="post" action="폼 전송 주소">
 <input type="text" id="email" name="email" maxlength="40" />

 <input type="button" value="확인" onclick="btnSubmit()" />
 </form>
 <script type="text/javascript">
 <!--

 // 정규식 : 이메일
 function chkEmail(str)
 {
  var reg_email = /^([0-9a-zA-Z_\.-]+)@([0-9a-zA-Z_-]+)(\.[0-9a-zA-Z_-]+){1,2}$/;

  if(!reg_email.test(str))
  {
   return false;
  }

  return true;
 }

 

 // 폼 전송
 function btnSubmit()
 {
  // 확인 : 이메일
  $('#email').val($('#email').val().trim()); // javascript를 이용해서 trim() 구현하기 바로가기
  if(!chkEmail($('#email').val()))
  {
   alert('이메일을 확인하세요.');
   $('#email').focus();
   return false;
  }
  
  //document.f.submit();
 }
 //-->
 </script> 

php 특수문자 정규표현식 이용하기 <- 클릭

Posted by 은둔고수
프로그램/jquery, javascript2012. 9. 17. 15:15

javascript 정규식 비밀번호 형식

자바스크립트 정규식을 이용해서 비밀번호 형식을 확인할 수 있다.

 

소스> 영문, 숫자 혼용해서 6~20자 이내

 var reg = /^.*(?=.{6,20})(?=.*[0-9])(?=.*[a-zA-Z]).*$/;

 

사용 예:jQuery>

 <form name="f" method="post" action="폼 전송 주소">
 <input type="password" id="pwd" name="pwd" maxlength="20" />
 <input type="button" value="확인" onclick="btnSubmit()" />
 </form>
 <script type="text/javascript">
 <!--
 // 정규식 : 비밀번호
 function chkPwd(str)
 {
  var reg_pwd = /^.*(?=.{6,20})(?=.*[0-9])(?=.*[a-zA-Z]).*$/;

  if(!reg_pwd.test(str))
  {
   return false;
  }

  return true;
 }

 // 폼 전송
 function btnSubmit()
 {
  // 확인 : 비밀번호
  $('#pwd').val($('#pwd').val().trim()); // javascript를 이용해서 trim() 구현하기 바로가기
  if(!chkPwd($('#pwd').val().trim()))
  {
   alert('비밀번호를 확인하세요.(영문,숫자를 혼합하여 6~20자 이내)');
   $('#pwd').val('');
   $('#pwd').focus();
   return false;
  }
  
  //document.f.submit();
 }
 //-->
 </script>

Posted by 은둔고수
프로그램/jquery, javascript2012. 9. 17. 15:02

javascript 정규식 이름 형식

자바스크립트 정규식을 이용해서 이름 형식을 확인할 수 있다.

 

소스>

// 한글 이름 2~4자 이내

var reg = /^[가-힣]{2,4}$/;

 

// 영문 이름 2~10자 이내 : 띄어쓰기(\s)가 들어가며 First, Last Name 형식

var reg = /^[a-zA-Z]{2,10}\s[a-zA-Z]{2,10}$/;

 

// 한글 또는 영문 사용하기(혼용X)

var reg = /^[가-힣]{2,4}|[a-zA-Z]{2,10}\s[a-zA-Z]{2,10}$/; // "|"를 사용

 

사용 예:jQuery>

 <form name="f" method="post" action="폼 전송 주소">
 <input type="text" id="name" name="name" maxlength="4" />
 <input type="button" value="확인" onclick="btnSubmit()" />
 </form>
 <script type="text/javascript">
 <!--
 // 정규식 : 이름
 function chkName(str)
 {
  var reg_name = /^[가-힣]{2,4}$/;

  if(!reg_name.test(str))
  {
   return false;
  }

  return true;
 }

 // 폼 전송
 function btnSubmit()
 {
  // 확인 : 이름
  $('#name').val($('#name').val().trim());  // javascript를 이용해서 trim() 구현하기 바로가기
  if(!chkName($('#name').val()))
  {
   alert('이름을 확인하세요.(한글 2~4자 이내)');
   $('#name').focus();
   return false;
  }

  //document.f.submit();

 }
 //-->
 </script>

Posted by 은둔고수

티스토리툴바