WEB/FRONT
-
[js] javascript validation 체크, 필수값, 유효성 검사, 핸드폰 형식,스크립트태그 입력 방지, 공백 불가WEB/FRONT 2021. 5. 12. 16:07
이번 포스팅은 자바스크립트를 이용한 사용자 입력값 체크에 대해서 다루겠습니다. 평소 사이트를 이용할때 "비밀번호 형식에 맞지 않습니다.", "비밀번호는 3~12자리 특수문자 포함입니다.", "핸드폰 형식에 맞지 않습니다", " 비밀번호는 필수 입력값입니다.","이미 사용하는 id입니다." 등을 만날수 있습니다. 여기서는 간단한 방법으로 입력값 유효성 검사를 하는 방법을 알아보겠습니다. (자바스크립트 이벤트 blur, change등의 개념을 필요로 합니다.) 결과 미리보기 로직 유효성 검사하고싶은 tag에 class check를 넣어준다. 사용자가 입력한다. (아무것도 입력하지않고 [등록] 버튼을 클릭시 전체 유효성 체크 발동) change 또는 blur가 일어날때 유효성 검사를 한다.(태그의 id, cl..
-
[JSTL] select 태그 반복문, option selected 주기, if, forEach, radio 태그에서 checked하기WEB/FRONT 2021. 5. 10. 17:33
이번 포스팅은 jsp에서 jstl을 활용해서 select박스에 특정 option 값에 서버에서 넘어온 값으로 selected해주는 방법을 알아보겠습니다. 상세페이지에서 자주 쓰이는 기법입니다. 예) 사용자가 선택지에서 선택한 값을 보여주기 및 수정 가능한 형태 등. 관련 포스팅 2021.10.04 - [WEB/FRONT] - [JSTL] JSTL 셋팅하는법 (pom.xml, spring, eclipse, maven) 기본 select 문 음료 밀크티 라떼 아아 결과 : 맨 위에 써있는 밀크티가 선택되어져 보입니다. select 문에서 특정 option 선택하기 음료 밀크티 라떼 아아 결과 : selected 를 사용한 태그가 선택되어져 있는걸 볼 수 있습니다. select 문에서 사용하여 서버에서 값 불..
-
[JS] Resource interpreted as Document but transferred with MIME type application/zip 경고, 파일 다운로드 오류WEB/FRONT 2021. 5. 4. 17:37
안녕하세요 오늘은 크롬창에 경고문구(Resource interpreted as Document but transferred with MIME type application/zip )에 대해서 포스팅을 하겠습니다~! 최근에 파일 업/다운로드관련 작업을 진행하였는데 오류까지는 아니였지만 크롬 브라우저에 경고문구가 뜬걸 보고 말았습니다. 경고문구를 번역해보자면 "Resource interpreted as Document but transferred with MIME type application/zip" ↓ "문서로 해석되지만 MIME 유형 application / zip으로 전송 된 리소스" [해결 방법1] 태그에 download 추가 Export [해결 방법2] _blank 를 사용해서 새창을 열어서 다운..
-
[jQuery] input 값 가져오기, select 값 가져오기, serialize() 사용WEB/FRONT 2021. 4. 30. 17:16
안녕하세요 오늘은 input 값 가져오기, select 값 가져오기 에 대한 포스팅을 진행하겠습니다! html에서 선택 or 입력된 값을 가져오는데 다양한 방법이 있습니다. 여기서는 가장 많이 쓰이고 기본적인 예제들로 알아보겠습니다! 1. select 에 사용자가 선택한 값 가져오기 Choose a pet: --Please choose an option-- Dog Cat Hamster Parrot Spider Goldfish 위와 같은 select 에서 사용자가 선택한 값을 가져오는 방법은 아래와 같습니다. $("#pet-select").val() 크롬 브라우저에 개발자 모드에서 확인을 해보면 ^ 이렇게 나오는걸 확인할 수 있습니다. 2. input 값 가져오기 Name : 위와같은 input 태그에서 ..
-
[JSTL] <c:if test>, <c:choose> , <c:otherwise> <c:forEach> 태그 정리 (feat. jstl if문, forEach 문, 게시판 예시)WEB/FRONT 2021. 4. 28. 17:18
안녕하세요 오늘은 jstl에서 가장 자주 쓰이는 if else 문과 for문 에 대한 태그를 정리해보도록 하겠습니다. 이것만은 숙지하도록 하자! (참고) html tag와 마찬가지로 열어주는 태그와 닫아주는 태그가 같이 쓰인다. 사용전에 jsp페이지 상단에 필요한 라이브러리들을 import해주는것 잊지말자. 1. 해석 : 만약 변수 status가 '완료'라면 화면에 complete를 보여준다. 는 간단한 분기처리에서 쓰임. 2. 분기처리할때 가장 많이 쓰이는 태그이다. 자바에서 if else를 jstl로 찾고 있다면 이것을 쓰면됨. 특히 게시판 목록 보여주거나 select box 보여줄때 forEach 와 함께많이 쓰인다. 그 경우는 하단에서 살펴보고 일단은 방금 언급한 forEach 에 대해 알아보자...
-
[JS] javascript cookie 생성, 가져오기,삭제 (feat.브라우저 확인)WEB/FRONT 2021. 4. 23. 11:58
안녕하세요 오늘은 자바스크립트에서 cookie를 생성 & 활용 & 삭제하는 포스팅을 해보도록 하겠습니다. 자바에서도 스크립트에서도 쿠키를 생성할 수 있다. 여기서는 js로! 필요성 로그인 하고 최초 한번만 실행되는 기능을 위해 쿠키를 만들어서 브라우저에 저장해 놓는다. (가령 비밀번호 바꾼지 60일 안내, 라이선스 초과 구매 안내 등) 로직 브라우저 들어오면 && 쿠키 없으면 ->얼랏 최초 한번 띄움 띄우는 순간 쿠키 생성 그러면 다음부터 얼랏 안띄움 (이미 쿠키가 있기때문) // 쿠키 생성 함수 function setCookie(cName, cValue, cDay){ var expire = new Date(); expire.setDate(expire.getDate() + cDay); cookies = ..