FRONT/JavaSrcipt (7) 썸네일형 리스트형 [JavaScript] 초 간단 유효성 체크 ( 이메일, IP, Port, 비밀번호, 글자 길이 제한 ) 1. 이메일 유효성 검사 let emailCheck = true; const ValidateEmail = (text) => { var emailformat = /^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/ if (emailformat.test(text)) { return emailCheck = true; } else { return emailCheck = false; } } 2. IP 유효성 검사 let srvrIpCheck = true; const ValidateServerIp = (text) => { var ipformat = /^(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-.. [JavaScript] input 입력 시 한글 입력 제한 설정 input 창에 입력 시 한글 입력을 막고 싶다. 입력된 값에 허용되지 않은 문자는 정규표현식을 사용하여 문자열에서 제외하는 replace() 함수를 실행할 것이다. @input 을 이용하여 함수를 호출한다. const bindKorean = (index) => { const regExp = /[^0-9a-zA-Z]/g; if (regExp.exec(state.list[index].name)) { state.list[index].name = state.list[index].name.replace(regExp, ''); } }; .exec 메소드는 정규식 패턴에 맞는 문자열 탐색을 수행하는 메소드이다. 문자열을 탐색하여 일치하는 값을 찾으면 .replace 로 해당 문자열을 지운다. @input 을 이용하.. [JavaScript] 두 개의 객체 비교 후 중복 값 제거 필터를 사용하여, map의 id와 data의 id가 일치하면 data에서 해당 값을 제거한다. let result = data.filter(item => { return !map.some(other => other.id === item.id) }) 일치하지 않을 경우 제거 하고 싶다면 let result = data.filter(item => { return map.some(other => other.id === item.id) }) 다중 조건(필드)으로 제거하기. let result = data.filter(item => { return !map.some(other => other.id === item.id && other.name === item.name) }) [Javascript] 테이블 행 숨기기/보이기 - display const item = document.getElementById('test') item.style.display = 'none'; item.style.display = ''; style.display 값을 지정하여 간단하게 테이블의 행을 숨기고 보여준다. [JavaScript] id 추가 , 수정 , 삭제 1. id 추가 document.querySelector('.sample').id = 'test'; 추가하려는 class명을 찾아 id 명을 입력해주면, 해당 위치에 id가 추가 된다. 2. id 수정 document.querySelector('.sample').setAttribute("test", "test2"); 기존 id 명을 원하는 id 명으로 수정 한다. 3. id 삭제 document.querySelector('.sample').removeAttribute('test2'); 해당하는 class명이 존재하는 곳의 id가 삭제 된다. removeAttribute() 메서드는 하나의 속성만 제거할 수 있다. 모든 속성을 제거하고 싶다면 반복문을 이용해야 한다. 1) const cellCheck = .. [JavaScript] QuerySelector(), QuerySelectorAll() , ClassList 추가/ 삭제 1. QuerySelector() DOM에서 원하는 element를 찾기 위해서 querySelector() 를 사용한다. 파라미터로 입력받은 CSS선택자를 사용해서 element를 찾아준다. 파라미터로 입력받은 CSS 선택자로 찾은 여러개의 element 중 첫번째 element를 리턴합니다. 2. QuerySelectorAll() 사용법은 QuerySelector()와 동일하다. 차이점은 CSS선택자로 찾은 모든 element 목록을 리턴합니다. 3. ClassList 1) ClassList 추가 해당 요소의 클래스 속성값을 추가한다. 동일 클래스명이 존재하면 무시한다. const rows = document.querySelector('.sample'); rows.classList.add('test'.. [Chrome] Chrome devTool - DevTools failed to load source map: Could not load content for chrome-extension://gighmmpiobklfepjocnamgkkbiglidom/browser-polyfill.js.map: System error: net::ERR_FILE_NOT_FOUND 숨기기 Chrome 개발자 툴 열면 항상 나온다. DevTools failed to load source map: Could not load content for chrome-extension://gighmmpiobklfepjocnamgkkbiglidom/browser-polyfill.js.map: System error: net::ERR_FILE_NOT_FOUND 실행 할 때 딱히 상관은 없지만 거슬린다. F12 > 환경설정 > Sources - "Enable JavaScript source maps"를 체크 해제 후 새로고침 해결. 이전 1 다음
