Front/JavaScript & jQuery27 [jQuery] 제이쿼리 validation 플러그인으로 쉽게 유효성 검사하기 jQuery Validation form 입력 데이터의 유효성을 검증하는 것은 아주 중요한 일이다. jQuery에서 제공하는 validate 플러그인은 유효성 검증을 더욱 쉽게 해주도록 도와준다. 사용자 입장에서 form에 데이터를 입력하고 submit을 했을 때, 개발자가 일일히 걸어놓은 유효성 검증을 거쳐 통과못한 경우에 계속해서 alert창이 뜬다면 번거로울 것이다. validate플러그인을 이용하면 사용자가 빠르게 체크할 수 있도록 시각화해주고 onkeyup, onfocusout을 이용하여 실시간 유효성 검사 가능도 가능하다. 이 외에도 다양한 기능을 제공하니 공식문서를 확인하여 참고해야겠다. https://jqueryvalidation.org/ jQuery Validation Plugin | F.. 2023. 2. 28. jQuery를 바닐라 JS(Vanilla JS)로 변환하기 Pure Javascript 상황 프로젝트를 진행하면서 스크립트를 짤 때, 나는 대부분 jQuery를 이용했다. 가독성이 좋고, 편하다는 이유로 순수 자바스크립트로 코드를 작성하는 것을 미루고 있었다. 순수 자바스크립트로 작성하는 비중을 늘리기 위해, jQuery를 바닐라 JS(Pure JS)로 변환해보려고 한다. 적용 ✔️1. 선택자( Selector ) 1) 단순 선택자 DOM 요소를 선택하는 것은 가장 기본적인 요소 중 하나이다. $(selector) -> querySelector() 또는 querySelectorAll() // jQuery(.className모두 선택) $(".className"); //.className의 첫번째 인스턴스 선택 document.querySelector(".className"); //.clas.. 2023. 2. 16. [JavaScript] Safari 에서 new Date() NaN 오류 이슈 Safari 브라우저에서 Date가 안나오고 NaN이라고 뜨는 이슈가 있다. 아래와 같이 자바스크립트에서 흔히 사용하는 Date 객체에 String 타입의 날짜를 담아 사용할 때, 문제를 뱉는다. new Date('2021-11-01'); 이 이슈 해결하기 위해서 두가지 방법이 있다. 1. moment.js 라이브러리를 사용하는 방법. moment.js를 사용하면 어느 브라우저에서나 호환이 된다고 한다. 2. 아래 예시와 같이 2021-11-01T00:00:00 을 2021/11/01 00:00:00 형식으로 바꿔서 넣어주면 된다고 한다. // $("#countDownDate").val() == '2022-11-30 23:59' let countDownDate = new Date($("#countDown.. 2022. 11. 21. [JavaScript] 숫자 3자리(천단위) 마다 콤마 찍는 방법 상황 input text 안에 숫자를 입력할 때 마다 숫자만 입력되도록 처리하고 (replace) 천단위 마다 콤마가 입력되도록 해야 한다. 방법 - onkeyup 이벤트를 이용한다. $(".currency").off("keyup").on("keyup",function() { //콤마(,)찍기 $meetingReg.fnCurrencyFormat( this ); }); fnCurrencyFormat : function(obj) { obj.value = $meetingReg.comma($meetingReg.uncomma(obj.value)); }, comma : function(str) { str = String(str); return str.replace(/(\d)(?=(?:\d{3})+(?!\d))/g,.. 2022. 3. 30. [JavaScript] window.print() 지정 영역, 원하는 영역 출력하기 자바스크립트에서는 프린터로 출력하는 함수 window.print()를 제공한다. 단, 이 함수는 웹페이지 전체 영역이 출력되는 함수이기때문에 필요한 영역만 지정해야할 필요가 있다. 원하는 영역 프린트를 제어하기 위한 이벤트 핸들러는 두 종류가 있다. window.onbeforeprint 와 window.onafterprint 영역을 지정하여 출력하기 이벤트 핸들러를 추가하여 영역을 지정해보자. window.onbeforeprint 와 window.onafterprint에 콜백함수를 지정한다. window.onbeforeprint 프린트 출력 이전 이벤트 발생 미리보기 시에 콜백함수 실행 window.onafterprint 프린트 출력 이후 이벤트 발생 미리보기 취소 또는 프린트 완료 후에 실행 아래는 간.. 2022. 1. 25. [JavaScript] 버튼 클릭하여 주소 복사하기 서울특별시 --구 --로 00빌딩 주소복사 2022. 1. 18. 이전 1 2 3 4 5 다음
