HTML5의 패턴 속성 사용법에 대한 자세한 설명

최근 모바일 페이지 작업을 하다가 숫자입력 키보드에 문제가 생겼습니다. 기존 접근 방식은 type="tel"을 전면적으로 사용하는 것이었지만, 항상 지우공게에 영문자가 들어가는 느낌이 들었습니다. 전화번호 키보드가 너무 방해가 되었어요. 그래서 다른 구현 솔루션도 해보고 싶었으나 최종 결론은 답답했습니다. 하지만 패턴의 속성 에 대해서도 자세히 알아볼 수 있는 기회를 얻었습니다.

type="tel"과 type="number"의 차이점

먼저 초기에 발생한 문제를 설명하겠습니다. 사실 전화번호도 전화번호도 완벽하지 않습니다.

type="tel"

장점은 iOS와 Android의 키보드 성능이 비슷하다는 점

단점은 강박 장애가 없는데도 그 글자가 너무 중복된다는 것입니다.

type="number"

안드로이드에서 실제 숫자 키보드를 구현한 것이 장점

단점 1: iOS에는 9각형 격자 키보드가 없어 입력이 불편하다

단점 2: 이전 버전의 Android(WeChat에서 사용하는 X5 커널 포함)에는 입력 상자 뒤에 아주 쓸모없는 작은 꼬리가 있습니다. 다행히 Android 4.4.4부터 이 부분이 제거되었습니다.

그러나 두 번째 단점으로 웹킷의 개인 의사 요소를 사용하여 문제를 해결할 수 있습니다.

input[type=number]::-webkit-inner-spin-button,  
    input[type=number]::-webkit-outer-spin-button { 
        -webkit-appearance: none; 
        appearance: none; 
        margin: 0; 
    }

패턴 속성

패턴은 양식 입력의 내용을 확인하는 데 사용됩니다. , 일반적으로 email, tel, number, data class, url 등과 같은 HTML5 Type 속성에는 이미 간단한 데이터 형식 확인 기능이 있습니다. 패턴을 추가하면 프런트 엔드 부분의 확인이 더 간단해집니다. 그리고 더 효율적입니다.

물론 패턴의 속성값은 정규식을 사용해야 합니다.

예

간단한 번호 확인

두 가지 번호 확인이 있습니다:

<input type="number" pattern="\d">  
<input type="number" pattern="[0-9]*">

양식 확인의 경우 다음과 같은 기능을 수행합니다. 두 정규 표현식은 동일하지만 성능이 매우 다릅니다.

iOS에서는 [0-9]*만 9제곱 숫자 키보드를 활성화할 수 있으며 d는 유효하지 않습니다

Android 4.4 아래(X5 커널 포함)에서는 둘 다 숫자 키보드를 호출합니다.

Android 4.4.4 이상에서는 유형 속성만 인식합니다. 즉, 위 코드가 type="number"를 type= "text로 변경하는 경우입니다. "는 9각형 숫자 키보드 대신 전체 키보드를 불러옵니다.

일반적으로 사용되는 정규 표현식

여기서는 자세히 설명하지 않고 일반적으로 사용되는 정규 표현식을 나열합니다.

신용 카드[ 0-9]{13,16}

UnionPay 카드^62[0-5]d{13,16}$

비자: ^4[0-9]{12 }( ?:[0-9]{3})?$

MasterCard: ^5[1-5][0-9]{14}$

QQ 번호: [1 -9 ][0-9]{4,14}

휴대폰 번호: ^(13[0-9]|14[5|7]|15[0|1|2|3|5| 6 |7|8|9]|18[0|1|2|3|5|6|7|8|9])d{8}$

신분증: ^([0-9 ] ){7,18}(x| 문자, 숫자 및 밑줄 포함

강력한 비밀번호: ^(?=.d)(?=.[a-z])(?=.*[A-Z]).{ 8,10}$ 대문자, 소문자 포함 숫자와의 조합에는

특수문자

를 사용할 수 없으며 길이는 8~10자 한자 7자 또는 14자: ^[u4e00- u9fa5]{1,7}$| ^[dA-Za-z_]{1,14}$

안타깝게도 패턴에 대한 브라우저 지원이 매우 열악합니다. Can I Use

하지만 글 초반에 언급한 대로라면 숫자 키보드를 바꾸면 iOS, Android 모두 문제가 없을 것입니다.

위 내용은 HTML5의 패턴 속성 사용법에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!