focus와 select 차이, 정규표현식

1. focus와 select 차이

focus()

• 특정 입력 필드에 커서를 자동으로 이동시킴.
• 예: 사용자가 올바른 값을 입력하지 않았을 때, 해당 입력란으로 이동하도록 설정.

예제

<input type="text" id="username">
<button onclick="document.getElementById('username').focus();">포커스 이동</button>

• 버튼을 클릭하면 username 입력란에 자동으로 커서가 이동함.

---

select()

• 입력 필드 내의 내용을 자동으로 선택.
• 사용자가 쉽게 내용을 수정하거나 복사할 수 있도록 함.

예제

<input type="text" id="email" value="user@example.com">
<button onclick="document.getElementById('email').select();">내용 선택</button>

• 버튼을 클릭하면 email 입력란의 전체 텍스트가 선택됨.

---

2. 정규표현식(Regular Expression, RegEx)

• 문자열에서 특정한 패턴을 검색, 검사 또는 변환하는 데 사용되는 표현식.
• /패턴/플래그 형식으로 작성됨.
• 예를 들어, 이메일 형식을 검사하는 정규식:

  var emailPattern = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;

  • ^ : 문자열의 시작
  • [a-zA-Z0-9._%+-]+ : 영문, 숫자, 특수문자 허용
  • @ : '@' 기호 필수
  • [a-zA-Z0-9.-]+ : 도메인 이름
  • \. : '.' 기호
  • [a-zA-Z]{2,} : 최소 2자리 이상의 문자

---

3. 회원가입 시 비밀번호에 특수문자 포함하는 정규표현식

• 최소 8자 이상, 특수문자 1개 이상 포함하도록 설정.

정규식 예제

var passwordPattern = /^(?=.*[!@#$%^&*()_+{}\[\]:;<>,.?~\\-]).{8,}$/;

• ^ : 문자열의 시작
• (?=.*[!@#$%^&*()_+{}\[\]:;<>,.?~\\-]) : 특수문자 최소 1개 이상 포함
• .{8,} : 최소 8자 이상
• $ : 문자열의 끝

---

4. 비밀번호 유효성 검사 예제 (JavaScript)

function checkPassword() {
    var password = document.getElementById("password").value;
    var pattern = /^(?=.*[!@#$%^&*()_+{}\[\]:;<>,.?~\\-]).{8,}$/;

    if (!pattern.test(password)) {
        alert("비밀번호는 최소 8자 이상이며, 특수문자를 포함해야 합니다.");
        document.getElementById("password").focus();
        return false;
    }
    alert("비밀번호가 유효합니다.");
    return true;
}

HTML 코드 예제

<input type="password" id="password" placeholder="비밀번호 입력">
<button onclick="checkPassword()">확인</button>

• 비밀번호가 조건을 충족하지 않으면 경고창을 띄우고, 입력 필드에 focus()를 줌.
• 조건을 충족하면 "비밀번호가 유효합니다." 메시지 출력.

---

정규표현식을 활용하여 회원가입 폼 유효성 검사를 강화할 수 있다.

정규표현식(RegEx)은 단순한 기호가 아니라 각각 의미를 가진 패턴입니다. 위의 정규표현식(/^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/)은 이메일 형식을 검사하기 위한 것입니다. 하나씩 해석해 볼게요.

---

정규표현식 분석: /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/

패턴	의미
/ ... /	정규표현식의 시작과 끝을 나타냄
^	문자열의 시작을 의미
[a-zA-Z0-9._%+-]+	이메일의 로컬 파트(local part) (예: username@example.com에서 username)
@	반드시 @가 포함되어야 함
[a-zA-Z0-9.-]+	이메일의 도메인(domain) 부분 (예: example.com)
\.	.을 문자 그대로 의미
[a-zA-Z]{2,}	최상위 도메인(TLD, 예: .com, .org)
$	문자열의 끝을 의미

---

하나씩 자세히 뜯어보기

1️⃣ ^

• 문자열의 시작을 의미합니다.
• ^hello → "hello world"는 매칭됨, "world hello"는 매칭되지 않음.

2️⃣ [a-zA-Z0-9._%+-]+

• [] 안의 문자는 하나의 문자를 의미합니다.
• a-zA-Z0-9._%+- → 영어 대소문자, 숫자, _, ., %, +, - 포함 가능.
• +는 1개 이상 반복된다는 의미.
  • 즉, 이메일 앞부분 (username 부분) 에 허용된 문자들을 하나 이상 포함해야 함.

✅ 예제
✔️ user.name@example.com ✅ (가능)
✔️ user_name123@example.com ✅ (가능)
❌ user@@example.com ❌ (불가능, @가 여러 개)

---

3️⃣ @

• "@" 기호가 반드시 있어야 한다는 의미.
• 이메일 형식이므로 필수 요소.

✅ 예제
✔️ test@example.com ✅ (가능)
❌ testexample.com ❌ (@ 없음)

---

4️⃣ [a-zA-Z0-9.-]+

• [] 안의 문자들(a-zA-Z0-9.-)은 이메일의 도메인 부분 (예: example.com)에서 허용되는 문자들입니다.
• +는 1개 이상 반복 가능하다는 의미.

✅ 예제
✔️ example.com ✅ (가능)
✔️ sub.example.com ✅ (가능)
❌ example..com ❌ (.이 연속으로 두 개 이상은 불가능)

---

5️⃣ \.

• 도메인에서 반드시 "."이 포함되어야 한다는 의미.
• \는 .을 특수문자가 아닌 일반 문자 그대로 인식하게 만듦.

✅ 예제
✔️ example.com ✅ (가능)
❌ examplecom ❌ (. 없음)

---

6️⃣ [a-zA-Z]{2,}

• 최상위 도메인(TLD) 검사.
• {2,}: 영어 대소문자로 최소 2글자 이상이어야 함.

✅ 예제
✔️ example.com ✅ (가능)
✔️ example.org ✅ (가능)
❌ example.c ❌ (c는 한 글자라 불가능)

---

7️⃣ $

• 문자열의 끝을 의미.
• $가 없으면, test@example.com이 아니라 test@example.com123 같은 것도 통과될 수 있음.

✅ 예제
✔️ user@example.com ✅ (가능)
❌ user@example.com123 ❌ (불가능)

---

정리

이메일 정규식 /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/의 의미는:

✔️ 영문/숫자/특수문자가 포함된 로컬 파트 + @ + 올바른 도메인 + . + 2글자 이상 TLD여야 한다.
✔️ 시작(^)과 끝($)을 지정하여 정확한 이메일 형식만 허용한다.

---

추가 예제: 이메일 검증 JavaScript 코드

function validateEmail(email) {
    var emailPattern = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;
    return emailPattern.test(email);
}

// 테스트
console.log(validateEmail("test@example.com")); // true
console.log(validateEmail("invalid-email.com")); // false
console.log(validateEmail("user@@example.com")); // false
console.log(validateEmail("user@example.c")); // false