[211105] 개인실습 및 정규식

window.onload = function() {     document.getElementById("id_username").addEventListener("blur", check)   <- 함수 이름만 적으면 됨 }; function check() { }

 

형식: /정규식/

1. - : 범위(어디에서 어디까지)
   • a-z : a에서 z까지를 의미
   • 0-9 : 0에서 9까지를 의미
   • ㄱ-ㅎ : ㄱ에서 ㅎ까지를 의미
   • ㅏ-ㅣ : ㅏ에서 ㅣ 까지를 의미
   • 가-힣 : '가'에서 '힣'까지를 의미
2. [] : 괄호 안에 문자중 1개
   • [a-z] : a에서 z중 하나.
   • [abc]d : ad, bd, bd 를 의미
3. [^] : 괄호안의 문제 부정(제외)
   • [^a-z] : a ~ z를 제외한 모든 문자
   • [^0-9] : 숫자를 제외한 모든 문자
4. | : 또는(OR)
   • [a-z|A-Z] : a ~ z 또는 A ~ Z 의미(영어 전체)
   • [ㄱ-ㅎ|ㅏ-ㅣ|가-힣] : ㄱ ~ ㅎ 또는 ㅏ ~ ㅣ 또는 가 ~ 힣 의미(한글 전체)
5. ^ : 문자열의 처음
   • ^[a-zA-Z] : 영문자로 시작해야함
6. $ : 문자열의 끝
   • [a-zA-Z]$ : 영문자로 끝나야함
   • ^[a-zA-Z]$ : 영문자로 시작하고, 영문자로 끝나야함
7. * : 0회 이상(여러개)
   • ^[a-zA-Z]*$ : 여러개의 문자가 모두 영문자여야 함
   • ^[0-9]*$ : 여러개의 문자가 모두 숫자여야 함
   • ^[a-zA-Z0-9]*$ : 여러개의 문자가 모두 영문자나 숫자여야 함
8. {m, n} : m회 이상, n회 이하
   • ^[a-zA-Z]*${1, 10} : 영문자 1자 이상, 10자 이하

입력받을 값 길이 제한은 정규식에 따라 안 먹히는 경우가 있으므로 if문에 value.length로 제한을 주는 방법 쓰기

 

function checkId(element) {     var idReg = /[a-z0-9]$/g;  //영소문자 숫자     if(!idReg.test(element.value)) {         // element.nextElementSibling.classList.remove("hidden");         // element.nextElementSibling.nextElementSibling.classList.remove("hidden");         // element.nextElementSibling.nextElementSibling.innerText = "아이디는 6 ~ 10자 영소문자 또는 숫자이어야 합니다.";         $("#id_username").nextAll().removeClass("hidden"); //뒤에오는형제둘(라벨두개) 클랙스삭제         $("#id_username").siblings().eq(2).text("아이디는 6 ~ 10자 영소문자 또는 숫자이어야 합니다.");     } else if(6 > element.value.length || element.value.length > 10) {         $("#id_username").nextAll().removeClass("hidden");         $("#id_username").siblings().eq(2).text("아이디 길이는 6 ~ 10자여야 합니다.");     } else {         $("#id_username").nextAll().addClass("hidden");     } }

 

출처: https://curryyou.tistory.com/208 [카레유]

 

 

비밀번호 정규식 사이트

https://www.wrapuppro.com/programing/view/MIw5kPB3ao2YJVx

[Javascript] 비밀번호 정규식 - 8자 이상의 문자열, 하나 이상 숫자, 문자, 특수문자 포함하기 : WRAPUP

ㄴ var 변수 = /[ ]/       <- 이렇게 슬래쉬로 해야함 쌍따옴표 아님(수정해서 쓸 것)

 

http://eartsquare.co.kr/bbs/board.php?bo_table=JAVASCRIPT&wr_id=4 

자바스크립트 정규표현식 아이디 체크 (영문+숫자) > | 아트스퀘어

https://hee-kkk.tistory.com/22

[정규식] 자주 쓰이는 정규식 모음(+비밀번호 스크립트 추가)

 

 

제이쿼리 select box 선택값 가져오기

 

// select box ID로 접근하여 선택된 값 읽기
$("#셀렉트박스ID option:selected").val();

// select box Name로 접근하여 선택된 값 읽기
$("select[name=셀렉트박스name]").val();

// 같은 방식으로 span과 같은 다른 태그도 접근 가능하다~
$("span[name=셀렉트박스name]").text();

// 선택된 값의 index를 불러오기
var index = $("#셀렉트박스ID option").index($("#셀렉트박스ID option:selected"));

// 셀렉트 박스에 option값 추가하기
$("#셀렉트박스ID").append("<option value='1'>1번</option>");

// 셀렉트 박스 option의 맨앞에 추가 할 경우
$("#셀렉트박스ID").prepend("<option value='0'>0번</option>");

// 셀렉트 박스의 html 전체를 변경할 경우
$("#셀렉트박스ID").html("<option value='1'>1차</option><option value='2'>2차</option>");

// 셀렉트 박스의 index별로 replace를 할 경우
// 해당 객체를 가져오게 되면, option이 다수가 되므로 배열 객체가 되어 eq에 index를 넣어 개별 개체를 선택할 수 있다.
$("#셀렉트박스ID option:eq(1)").replaceWith("<option value='1'>1차</option>");

// 직접 index 값을 주어 selected 속성 주기
$("#셀렉트ID option:eq(1)").attr("selected", "selected");

// text 값으로 selected 속성 주기
$("#셀렉트ID")val("1번").attr("selected", "selected");

or

$("#id").text("1번").attr("selected", "selected");

// value 값으로 selected 속성 주기
$("#셀렉트ID").val("1");

or

$("#id").val("1").prop("selected", true);

// 해당 index item 삭제하기
$("#셀렉트ID option:eq(0)").remove();

// 첫번째, 마지막 item 삭제하기
$("#셀렉트ID option:first").remove();
$("#셀렉트ID option:last").remove();

// 선택된 옵션의 text, value 구하기
$("#셀렉트ID option:selected").text();
$("#셀렉트ID option:selected").val();

// 선택된 옵션의 index 구하기
$("#셀렉트ID option").index($("#셀렉트ID option:selected"));

// 셀렉트박스의 아이템 갯수 구하기
$("#셀렉트ID option").size();

// 선택된 옵션 전까지의 item 갯수 구하기
$("#셀렉트ID option:selected").prevAll().size();

// 선택된 옵션 후의 item 갯수 구하기
$("#셀렉트ID option:selected").nextAll().size();

// 해당 index item 이후에 option item 추가 하기
$("#셀렉트ID option:eq(0)").after("<option value='3'>3번</option>");

// 해당 index item 전에 option item 추가하기
$("#셀렉트ID option:eq(3)").before("<option value='2'>2번</option>");

// 해당 셀렉트 박스에 change event binding 하기
$("#selectID").change(function() {
alert($(this).val());
alert($(this).children("option:selected").text());
});

 

출처: https://oingbong.tistory.com/175 [Oing]