텍스트 필드에 대한 사용자 지정 유효성 검사 패턴

A 텍스트 필드 사용자가 입력하는 모든 내용을 허용하지만, 특정 형식이 필요한 경우가 있습니다. 웹사이트 URL, 제품 코드, 라이선스 번호 또는 문자로만 구성된 이름 등은 모두 유효한 형식을 지정하는 패턴을 가지고 있습니다. 사용자 지정 유효성 검사 패턴을 사용하면 허용되는 형식을 정확하게 정의하여 제출 전에 오류를 잡아낼 수 있습니다.

이 가이드에서는 WordPress 폼의 텍스트 필드에 사용자 지정 유효성 검사 패턴을 추가하는 방법을 설명합니다.

유효성 검사 패턴이란 무엇인가요?

개념

유효성 검사 패턴은 어떤 입력이 유효한지 정의하는 규칙입니다.

• "문자만 포함해야 합니다."
• "유효한 URL이어야 합니다."
• "형식 ABC-1234와 일치해야 합니다."
• "반드시 10자여야 합니다."

그들이 일하는 방식

1. 사용자가 텍스트 필드에 입력합니다.
2. 제출 시(또는 입력하는 동안) 입력 내용이 패턴과 일치하는지 확인합니다.
3. 일치하면 유효성 검사가 통과됩니다.
4. 만약 그렇지 않다면: 오류 메시지가 표시됩니다

장점

• 데이터 품질: 일관된 형식을 유지하십시오
• 오류 방지: 실수를 일찍 잡아라
• 사용자 안내: 명확한 기대
• 다운스트림 호환성: 데이터는 다른 시스템과 연동됩니다.

내장 유효성 검사 패턴

자동 양식 작성기 일반적인 패턴을 포함합니다:

내장 패턴 사용하기

1단계: 텍스트 필드 추가

1. 양식을 엽니다. A.F.B.
2. 친애하는 본문 필드를 형성합니다
3. 클릭하여 구성하세요

2단계: 유효성 검사 패턴 선택

1. Find 유효성 검사 패턴 설정에서
2. 드롭다운 메뉴에서 선택하세요:
   • 없음 (패턴 없음)
   • 이메일
   • URL
   • 편지만
   • 숫자만
   • 영숫자
   • 관습
3. 설정 저장

3단계: 테스트 검증

1. 미리보기 양식
2. 유효한 입력을 시도해 보세요. 통과해야 합니다.
3. 잘못된 입력을 시도해 보세요. 오류가 표시될 것입니다.

패턴 예시 및 사용 사례

URL 검증

사용:

• 웹사이트 분야
• 포트폴리오 링크
• 소셜 미디어 프로필
• 참조 URL

유효한 예:

• https://example.com
• http://www.example.com/page
• https://example.com/path?query=value

잘못된 예시:

• example.com (프로토콜 누락)
• www.example.com (프로토콜 누락)
• 그냥 텍스트 몇 개

편지만

사용:

• 이름/성 (간단한 유효성 검사)
• 도시 이름
• 국가 코드
• 알파벳 식별자

유효한 예:

• 요한 복음
• 스미스
• NewYork

잘못된 예시:

• John123
• 뉴욕 (공간)
• 오브라이언(apostrophe)

참고 : 문자만 사용해야 한다는 규칙을 엄격히 지켜야 합니다. 공백, 하이픈 또는 악센트 기호가 필요한지 고려하십시오.

숫자만

사용:

• ID 번호
• 계좌 번호
• 수량 (숫자 입력란을 사용하지 않을 경우)
• PIN 코드

유효한 예:

• 12345
• 00123
• 9876543210

잘못된 예시:

• 123-456 (하이픈)
• 123.45(십진수)
• 12345

영숫자

사용:

• 제품 코드
• 참조 번호
• 사용자 이름
• 일련 번호

유효한 예:

• ABC123
• User42
• 프로드001

잘못된 예시:

• ABC-123 (하이픈)
• ABC 123 (공간)
• ABC_123 (밑줄)

사용자 지정 유효성 검사 패턴(정규 표현식)

Regex 란 무엇입니까?

정규 표현식(regex)은 텍스트 형식을 설명하는 패턴입니다.

• ^ = 문자열의 시작
• $ = 문자열의 끝
• [A-Z] = 모든 대문자
• [a-z] = 소문자
• [0-9] = 임의의 숫자
• {3} = 이전 항목 중 정확히 3개
• {2,5} = 이전 항목 중 2~5개 사이
• + = 하나 이상
• * = 0개 이상
• ? = 선택 사항 (0 또는 1)

사용자 지정 패턴 만들기

1. 유효성 검사 드롭다운에서 "사용자 지정"을 선택하세요.
2. 정규 표현식 패턴을 입력하세요
3. 다양한 입력값을 사용하여 테스트하십시오.

일반적인 사용자 정의 패턴 예시

미국 우편번호

패턴 : ^\d{5}(-\d{4})?$

유효성 검사:

• 12345 (5자리 숫자)
• 12345-6789 (ZIP+4)

거절:

• 1234 (너무 짧음)
• 123456 (너무 길다)
• ABCDE (알파벳)

미국 전화번호

패턴 : ^\d{3}-\d{3}-\d{4}$

유효성 검사: 555-123-4567

유연한 형식의 경우: ^\(?\d{3}\)?[-.\s]?\d{3}[-.\s]?\d{4}$

유효성 검사:

• 555-123-4567
• (555) 123-4567
• 555.123.4567
• + 555 123 4567

제품 코드 (ABC-1234 형식)

패턴 : ^[A-Z]{3}-\d{4}$

유효성 검사:

• ABC-1234
• XYZ-9999
• PRO-0001

거절:

• abc-1234 (소문자)
• AB-1234 (글자 2개)
• ABC1234 (하이픈 누락)

차량 번호판 (다양한 형식)

패턴(미국 일반): ^[A-Z0-9]{1,7}$

유효성 검사: 1~7개의 대문자/숫자

신용카드 (기본 형식)

패턴 : ^\d{4}[\s-]?\d{4}[\s-]?\d{4}[\s-]?\d{4}$

유효성 검사:

• 1234567890123456
• 1234 5678 9012 3456
• 1234-5678-9012

참고 : 실제 결제에는 유효성 검증 기능을 갖춘 적절한 결제 처리 업체를 이용하십시오.

사용자 이름 (문자, 숫자, 밑줄 포함)

패턴 : ^[a-zA-Z][a-zA-Z0-9_]{2,19}$

규칙 :

• 글자로 시작합니다
• 총 3~20자
• 문자, 숫자, 밑줄만 사용 가능

유효성 검사: user_123, JohnDoe, test42

XNUMX진수 색상 코드

패턴 : ^#([A-Fa-f0-9]{6}|[A-Fa-f0-9]{3})$

유효성 검사:

• #FF5733
• #fff
• #ABC123

날짜 (YYYY-MM-DD)

패턴 : ^\d{4}-\d{2}-\d{2}$

유효성 검사: 2026-01-15

참고 : 날짜를 입력할 때는 날짜 선택기가 있는 날짜 필드를 사용하는 것이 일반적으로 더 좋습니다.

시간 (시:분 24시간 형식)

패턴 : ^([01]\d|2[0-3]):[0-5]\d$

유효성 검사:

• 09:30
• 14:45
• 23:59

송장 번호 (INV-YYYY-NNNN)

패턴 : ^INV-\d{4}-\d{4}$

유효성 검사:

• INV-2026-0001
• INV-2025-1234

사회보장번호(미국)

패턴 : ^\d{3}-\d{2}-\d{4}$

유효성 검사: 123-45-6789

경고: 사회보장번호(SSN) 수집 시 주의하세요. 보안 및 개인정보 보호에 문제가 발생할 수 있습니다.

나만의 패턴 만들기

단계별 프로세스

1. 요구 사항 정의: 어떤 형식이 필요하신가요?
2. 그것을 파괴: 어떤 캐릭터들을, 몇 명이나, 어떤 순서로?
3. 빌드 패턴: 정규 표현식으로 번역
4. 철저하게 테스트하세요: 유효한 입력과 유효하지 않은 입력
5. 오류 메시지를 작성하세요: 사용자가 형식을 이해하도록 도와주세요

예시: 직원 ID

요구 사항 : 문자 2개 + 숫자 4개 + 문자 1개 (예: AB1234C)

고장:

• 대문자 2개: [A-Z]{2}
• 4자리 숫자: \d{4}
• 대문자 1개: [A-Z]
• 그 이전이나 이후에는 아무것도 없습니다. ^ $

최종 패턴: ^[A-Z]{2}\d{4}[A-Z]$

테스트 패턴

양식에 사용하기 전에:

• 유효한 입력값을 테스트합니다 (통과해야 함).
• 잘못된 입력값을 테스트합니다 (실패해야 함).
• 경계 조건, 특수 문자 등 예외 상황을 테스트합니다.
• 온라인 정규 표현식 테스터를 사용하여 디버깅하세요.

유효성 검사 오류 메시지

기본 메시지

• "유효한 값을 입력하세요."
• "이 필드는 유효하지 않습니다."

더 나은 맞춤 메시지

사용자에게 예상되는 형식을 알려주세요.

자리 표시자와 도움말 텍스트 사용하기

형식을 미리 표시하여 오류를 방지하세요.

• 자리 표시 자 : “ABC-1234”
• 도움말 텍스트: "제품 코드를 입력하세요 (예: ABC-1234)"

모범 사례

1. 간단하게 시작하세요

가능하면 내장 패턴을 사용하세요. 사용자 지정 정규 표현식은 복잡성을 증가시킵니다.

2. 과도한 검증을 하지 마세요

지나치게 엄격한 패턴은 사용자에게 불편함을 초래합니다.

• 하이픈이 들어간 이름 (Mary-Jane)
• 이름에 아포스트로피가 포함된 경우 (O'Brien)
• 국제적인 등장인물 (호세, 뮐러)

3. 예상 형식 표시

사용자에게 항상 기대하는 바를 명확히 알려주세요.

• 예시가 포함된 자리 표시자
• 형식을 설명하는 도움말 텍스트
• 오류 메시지 지우기

4. 예외 상황 테스트

• 빈 입력
• 시작/끝 부분의 공백
• 특수 문자
• 최대 길이

5. 대안을 고려

때로는 다른 접근 방식이 더 나을 수 있습니다.

• 날짜 → 날짜 필드 사용
• 숫자 → 숫자 필드 사용
• 전화번호 → 전화번호 필드를 특정 형식으로 사용
• 고정 옵션 → 드롭다운 사용

다른 검증 방법과 결합

패턴 + 필수

• 해당 필드는 반드시 입력해야 하며, 패턴과 일치해야 합니다.
• 빈 칸은 "필수" 항목을 실패시킵니다.
• 형식이 잘못되어 패턴이 실패합니다.

패턴 + 최소/최대 길이

• 패턴은 형식을 검증합니다
• 길이는 크기를 검증합니다.
• 둘 다 통과해야 합니다

문제 해결 패턴

패턴이 작동하지 않습니다

검사:

• 구문이 올바릅니다 (오타 없음).
• 특수 문자가 올바르게 이스케이프되었습니다.
• 필요한 경우 ^ 및 $ 앵커를 사용하세요.

유효한 입력이 거부됨

검사:

• 패턴이 너무 엄격할 수 있습니다.
• 패턴에 유효한 문자가 누락되었습니다.
• 대소문자 구분 문제

잘못된 입력이 허용되고 있습니다

검사:

• 패턴이 너무 헐렁할 수도 있습니다.
• 앵커(^ 및 $)가 누락되었습니다.
• 더 많은 예시로 테스트해 보세요.

자주 묻는 질문

여러 패턴을 조합할 수 있나요?

필드 하나당 하나의 패턴만 사용합니다. 복잡한 유효성 검사의 경우, 교대 연산자(|)를 사용하여 하나의 정규식에 요구 사항을 결합하거나 모든 요구 사항을 충족하는 패턴을 생성하세요.

패턴은 대소문자를 구분하나요?

기본적으로는 예입니다. 대소문자를 구분하지 않으려면 [A-Za-z]를 사용하거나, 지원되는 경우 대소문자 구분 안 함 플래그를 추가하세요.

공백을 허용하려면 어떻게 해야 하나요?

문자 클래스에 \s를 추가하세요. [A-Za-z\s]는 문자와 공백을 모두 포함합니다.

국제 문자는 어떻게 처리하나요?

표준 [A-Za-z]에는 악센트 문자가 포함되지 않습니다. 국제 이름의 경우, 유효성 검사를 완화하거나 (지원되는 경우) 모든 문자에 대해 \p{L}을 사용하는 것을 고려하십시오.

블러 처리 후 검증해야 할까요, 아니면 제출해야 할까요?

둘 다 작동합니다. 초점이 흐려지면(흐릿해지면) 더 빠른 피드백을 제공하고, 제출하면 모든 것을 포착합니다. 많은 양식이 이 두 가지 기능을 모두 제공합니다.

제품 개요

사용자 지정 유효성 검사 패턴 추가:

1. 패턴 유형을 선택하세요 내장형 또는 맞춤형
2. 구성 패턴 - 정규 표현식을 선택하거나 입력하세요
3. 자리 표시자를 추가하세요 – 예상되는 형식을 표시합니다
4. 도움말 텍스트를 추가하세요 – 요구사항을 설명하세요
5. 설정 오류 메시지 – 가이드 수정
6. 철저한 테스트 – 유효한 입력과 유효하지 않은 입력

맺음말

사용자 지정 유효성 검사 패턴은 특정 형식을 강제하여 데이터 품질을 보장합니다. URL 유효성 검사, 제품 코드 또는 사용자 지정 식별자 등 어떤 유효성 검사가 필요하든, 패턴은 제출 전에 오류를 잡아내고 사용자가 올바른 입력을 하도록 안내합니다.

자동 양식 작성기 일반적인 패턴(이메일, URL, 문자, 숫자, 영숫자)을 포함하며, 특수한 유효성 검사 요구 사항을 위한 사용자 지정 정규 표현식도 지원합니다. 깨끗한 데이터는 적절한 유효성 검사에서 시작됩니다.

폼 입력값 유효성 검사를 할 준비가 되셨나요? 자동 양식 작성기 다운로드 또한 양식이 올바른 형식의 데이터를 수집하는지 확인하십시오.