728x90 반응형 자바스크립트11 [javascript] jQuery로 전화번호 형식 유효성 검사하기: 정규 표현식 활용 방법 서문 사용자로부터 전화번호를 입력받았을 때, 그 번호가 올바른 번호인지 체크한 후 저장할 필요가 있습니다. 오늘은 정규식을 활용하여 사용자로부터 입력받은 휴대폰 번호가 올바른 형식으로 입력된 것인지 판단하고, 올바른 형식의 번호가 아니라면 경고창을 띄우고, 올바른 형식의 번호라면 하이픈('-')을 입력하지 않은 번호는 하이픈을 입력한 형식으로 변환시켜 주는 작업까지 해보겠습니다. 본문 전화번호 입력 박스와 jQuery문 작성 코드가 간단하기 때문에 한번에 적어보도록 하겠습니다. 전화번호 입력 : 전화번호를 입력받을 input 태그의 text를 만들어 줍니다. id는 pcs로 지정해 주겠습니다. 다음 jQuery문을 작성합니다. id가 pcs인 태그의 포커스가 해제되었을 때 (blur) pcs에 입력된 v.. 2023. 9. 27. [javascript] "변경사항이 저장되지 않을 수 있습니다" 경고창 안나오게 하기 (onbeforeunload) 서문 사이트에서 무언가 작업을 하거나, 작성을 하다가 페이지를 벗어나려 할 때, "페이지를 벗어나시겠습니까? 변경사항이 저장되지 않을 수 있습니다"라는 경고창을 보신 분들 꽤 많을 것입니다. 이 경고창이 필요할 때 제때 잘 나와주면 실수로 페이지 벗어나는 것도 방지되고 좋지만, 메인페이지나, 정보를 수정하고 저장버튼을 눌렀을 때 저런 메시지가 나온다면 헷갈릴 수 있겠죠. 내가 수정한 정보들이 저장되지 않는다는 뜻처럼 보이니까요. 이럴 때 onbeforeunload 이벤트를 사용하여 메시지를 나오지 않게 처리한다거나, 혹은 해당 메시지를 출력하게 설정할 수 있습니다. 본문 onbeforeunload 이벤트? onbeforeunload 이벤트는 보통 페이지를 벗어날 때 발생하는 이벤트입니다. 예를 들어 새로.. 2023. 4. 21. [jQuery] 클릭하지 않고 클릭 이벤트 발생 시키는 방법 서문 웹페이지를 작성하다 보면, 하나의 버튼을 클릭했을 때 다른 버튼도 함께 동작하면 좋겠다 싶은 때가 있습니다. 그때 사용하면 좋은 메서드인 trigger에 대해서 알아보도록 하겠습니다. 본문 . trigger 이벤트는 click와 같은 javaScript 이벤트 유형을 포함하는 문자열입니다. 트리거 이벤트는 트리거 이벤트 작동을 선언하기 전에 앞에서 이벤트 핸들러가 정의되어 있어야 합니다. 코드는 순차적으로 실행되니 트리거 이벤트 위에 꼭 클릭이벤트 처리를 하나 만들어 주셔야 합니다. 예를 들어 보겠습니다. 이미지를 보여주는 버튼 하나와 경고창을 생성하는 버튼 하나를 만들어주고, 경고창 버튼을 눌렀을 때, 이미지를 보여주는 버튼의 이벤트 효과도 함께 동작하게 해 보겠습니다. 간단하게 버튼 두 개와 이.. 2023. 4. 19. [자바스크립트/jQuery] 제이쿼리, 정규식을 활용한 이메일과 비밀번호 유효성 검사 소개 이메일과 비밀번호를 입력하는 웹페이지가 있다는 가정하에 양식을 제출하기 전에 jQuery를 사용하여 사용자 입력의 유효성을 검사한다고 가정해 보겠습니다. 특히 사용자가 특정 기준을 충족하는 유효한 이메일 주소와 암호를 입력했는지 확인하려고 합니다. 이를 위해 양식에서 제출 이벤트를 수신하는 jQuery 함수를 작성한 다음 이메일 및 비밀번호 입력 필드의 값을 확인합니다. 필드가 비어 있거나 지정된 기준을 충족하지 않는 경우 함수는 오류 메시지를 표시하고 양식이 제출되지 않도록 합니다. 코드 $(document).ready(function() { // 양식에서 제출 이벤트 수신 $('form').submit(function(event) { // 이메일 및 비밀번호 입력 필드의 값 가져오기 var em.. 2023. 3. 3. 이전 1 2 3 다음 728x90 반응형
