전화번호를 사용자가 입력할 때, 입력 형식을 자동으로 지정된 형식(예: 010-3333-1234)으로 변환하고, 데이터베이스에는 숫자만 저장되도록 하는 기능을 구현하려면 다음과 같은 단계로 진행할 수 있습니다.
1. 자바스크립트로 입력 형식 처리
사용자가 입력할 때마다 자바스크립트를 사용해 입력된 값을 실시간으로 포맷팅합니다. 이 작업은 oninput 이벤트를 사용하여 입력값을 감지하고, 숫자만 추출한 후 적절한 형식으로 변환한 다음, 다시 입력 필드에 설정하는 방식으로 구현할 수 있습니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>전화번호 입력 포맷</title>
<script>
function formatPhoneNumber(input) {
// 입력된 값에서 숫자만 추출
let numbers = input.value.replace(/\D/g, '');
// 길이에 따라 형식 지정
let formattedNumber = '';
if (numbers.length <= 3) {
formattedNumber = numbers;
} else if (numbers.length <= 7) {
formattedNumber = numbers.slice(0, 3) + '-' + numbers.slice(3);
} else if (numbers.length <= 11) {
formattedNumber = numbers.slice(0, 3) + '-' + numbers.slice(3, 7) + '-' + numbers.slice(7);
} else {
formattedNumber = numbers.slice(0, 3) + '-' + numbers.slice(3, 7) + '-' + numbers.slice(7, 11);
}
// 포맷팅된 전화번호를 입력 필드에 표시
input.value = formattedNumber;
}
function removeFormattingAndSubmit(form) {
// DB에 저장하기 전에 숫자만 추출
const phoneInput = form.phone;
phoneInput.value = phoneInput.value.replace(/\D/g, '');
form.submit();
}
</script>
</head>
<body>
<form method="post" action="save_phone.asp" onsubmit="removeFormattingAndSubmit(this)">
<label for="phone">전화번호:</label>
<input type="text" id="phone" name="phone" oninput="formatPhoneNumber(this)" maxlength="13">
<input type="submit" value="저장">
</form>
</body>
</html>
2. 서버 측에서 데이터 저장 처리 (ASP)
이제 숫자로만 이루어진 전화번호를 데이터베이스에 저장합니다.
<%
Dim phoneNumber
' 폼에서 전송된 값 가져오기
phoneNumber = Request.Form("phone")
' 데이터베이스 연결 및 전화번호 저장
Dim conn, sql
Set conn = Server.CreateObject("ADODB.Connection")
conn.Open "your_connection_string_here"
sql = "INSERT INTO YourTableName (PhoneNumber) VALUES ('" & phoneNumber & "')"
conn.Execute(sql)
conn.Close
Set conn = Nothing
Response.Write("전화번호가 저장되었습니다.")
%>
요약
- 자바스크립트를 사용해 사용자가 입력한 전화번호를 실시간으로 포맷팅합니다.
- 제출 시 포맷팅된 값을 다시 숫자만 남도록 변환하고 서버로 전송합니다.
- 서버 측에서는 변환된 순수 숫자 형태의 전화번호를 데이터베이스에 저장합니다.
이렇게 하면 사용자가 편리하게 전화번호를 입력할 수 있으며, 데이터베이스에는 숫자만 저장됩니다.
반응형
'코딩ㆍ개발 정보 > HTML 연습' 카테고리의 다른 글
| [쿠키 및 CSS 보안 설정] 외부 침입자를 막기 위한 방법 (0) | 2024.08.29 |
|---|---|
| [ASP, MSSQL] dbconnection.asp 사용하기 (0) | 2024.08.28 |
| [ASP, AJAX] 메뉴 검색 기능 (2) | 2024.08.27 |
| [도커] 시놀로지 SSH로 Docker 사용하는 명령어들 (0) | 2024.08.21 |
| [톰캣] tomcat에서 context 추가하는 방법 3가지 (0) | 2024.08.21 |
