728x90 반응형 jQuery12 [jQuery] 정규식을 활용한 이메일과 비밀번호 유효성 검사 소개 이메일과 비밀번호를 입력하는 웹페이지가 있다는 가정하에 양식을 제출하기 전에 jQuery를 사용하여 사용자 입력의 유효성을 검사한다고 가정해 보겠습니다. 특히 사용자가 특정 기준을 충족하는 유효한 이메일 주소와 암호를 입력했는지 확인하려고 합니다. 이를 위해 양식에서 제출 이벤트를 수신하는 jQuery 함수를 작성한 다음 이메일 및 비밀번호 입력 필드의 값을 확인합니다.필드가 비어 있거나 지정된 기준을 충족하지 않는 경우 함수는 오류 메시지를 표시하고 양식이 제출되지 않도록 합니다. 코드 $(document).ready(function() { // 양식에서 제출 이벤트 수신 $('form').submit(function(event) { // 이메일 및 비밀번호 입력 필드의 값 가져오기.. 2023. 3. 3. [PHP/jQuery] 간단한 실시간 채팅 애플리케이션 예제 설명 이 예제는 PHP와 jQuery를 이용하여 실시간으로 채팅하는 웹 애플리케이션을 만드는 것입니다.이 예제에서는 PHP를 사용하여 백엔드를 구축하고, jQuery를 사용하여 프런트엔드를 처리합니다.이 예제는 AJAX(Asynchronous JavaScript and XML) 기술을 사용하여 비동기적으로 데이터를 전송합니다. 구현 순서 먼저, 데이터베이스에 연결하여 테이블을 생성합니다. 이 테이블에는 사용자 이름, 메시지, 날짜 및 시간이 저장됩니다.PHP를 사용하여 서버 측 스크립트를 작성합니다. 이 스크립트는 데이터베이스와 연결하고 새 메시지를 추가하거나 기존 메시지를 가져올 수 있도록 합니다.클라이언트 측에서는 jQuery를 사용하여 채팅 창과 입력란, 그리고 메시지를 추가하는 버튼을 만듭니다.A.. 2023. 2. 25. [jQuery] 파일 첨부 시 미리보기, 파일 확장자명 판별하기 html 코드를 사용하여 파일을 첨부할 때 보통 input type = "file"를 사용하여 파일을 첨부합니다.이때 파일만 첨부되고 어떤 파일이 첨부 되었는지 알 수가 없습니다.이미지 미리보기가 된다면 어떤 파일을 첨부했는지 쉽게 알 수 있을 것입니다. 이번 글은 첨부한 이미지파일을 미리 볼 수 있는 미리 보기 기능에 대해 작성해 보겠습니다. 작업할 내용 아래 파일 선택을 눌러서 파일을 첨부하면 위쪽에 미리 보기로 첨부한 이미지가 올라가게 됩니다.첨부한 파일명은 파일 선택 바로 옆에 표기되게 되고,오른쪽의 첨부하기 버튼을 누르면 파일을 저장하게 됩니다. 이미지 미리 보기 코드 가끔 페이지를 공격하여 정보를 빼내가려는 사람들은 파일 첨부기능에 자신들의 코드가 작성된 파일을 첨부하기도 합니다.. 2023. 2. 14. [jQuery] confirm 확인과 취소, div 값 변경 자바스크립트에서 alert를 사용하여 경고창을 띄울 수 있습니다.하지만 alert는 사용자에게 메시지를 전달하는 기능일 뿐 사용자가 true와 false를 선택할 수 없습니다.이 글에서는 true와 false를 선택할 수 있는 confirm 함수에 대해서 살펴보도록 하겠습니다. confirm 이란? confirm 함수는 alert 함수와 비슷하게 경고창을 띄워주는 함수입니다. 예를 들어,로그인할 때 "비밀번호가 틀렸습니다!" 같은 메시지는 alert로 보내주면 됩니다. 하지만 글을 작성할 때 "저장하시겠습니까?" 같은 메시지는 alert로 보내줄 경우,예, 아니요를 선택 할 수 없기 때문에 alert로 메시지를 보내주면 안 되고 confirm을 통해 true와 false를 판별해 주어야 합니다. .. 2023. 2. 13. [jQuery] 간단한 예제로 ajax 사용해보기 ajax란 무엇일까? ajax는 비동기 자바스크립트 xml이라고 합니다.비동기로 서버와 통신하고 json, xml, html, text 등의 값을 주고받을 수 있습니다.쉽게 말해서 페이지를 새로고침하지 않고도 서버와의 통신을 통해 값을 받아 올 수 있는 것입니다. 기존에 입력된 값들은 새로고침을 하게 되면 다 날아가게 되어 이런 비동기 방식을 활용하여,입력돼 있던 값들도 살리고 서버에서 필요한 데이터도 가져올 수 있게 하는 것입니다. 예제를 통해 알아보기 test_page.php ajax 통신하기! ajax 통신이 잘되는지 확인하기 위해 간단하게 text값을 넘겨보겠습니다. url에 ajax를 통해 값을 넘겨주고 싶은 페이지의 경로를 적습니다.위의 예제는 같은 폴더에 있는 test_page2.. 2022. 12. 30. [jQuery] 버튼 클릭 시 박스 숨기기, 보이기 (show, hide) 버튼을 클릭했을 때, 혹은 특정 이벤트가 발생했을 때,특정 영역이 나타나거나 사라지는 패턴들 여러 사이트에서 많이 볼 수 있습니다.이런 애니메이션 효과는 jQuery를 사용하면 손쉽게 구현할 수 있습니다.이 글에서는 jQuery를 활용하여 버튼을 클릭 시 해당하는 박스를 숨기고 보이는 기능에 대해서 설명하도록 하겠습니다. 버튼 클릭으로 숨기고 보이기 처리하기 위의 예제 이미지와 같이 숨기기와 보이기 버튼을 만들어두고,숨기기 버튼을 클릭 시 패널이 사라지고, 보이기 버튼을 클릭 시 패널이 다시 보이게 되는 것을 만들어 보도록 하겠습니다. 패널의 내용이 표시되는 곳 입니다. 코드는 위와 같이 간단하게 구현이 가능합니다.아이디가 hide_btn를 클릭 시 id가 panel인.. 2022. 12. 27. 이전 1 2 다음 728x90 반응형
