HTML에서 길이 유효성 검사 설정

1. pattern 속성을 사용하여 HTML에서 길이 유효성 검사 설정
2. minlength 속성을 사용하여 HTML에서 최소 길이 유효성 설정

이 기사에서는 HTML 양식에서 길이 유효성 검사를 설정하는 두 가지 방법을 소개합니다. 또한 최소 및 최대 길이 유효성 검사에 대해 설명합니다.

pattern 속성을 사용하여 HTML에서 길이 유효성 검사 설정

pattern 속성은 HTML의 input 태그에 정규식을 정의합니다. 양식의 입력 값을 확인하고 유효성 검사를 수행합니다.

pattern 속성의 값으로 정규식을 지정할 수 있습니다. 텍스트, 이메일, 비밀번호, 전화번호, URL, 날짜 및 검색과 같은 입력 유형과 함께 pattern 속성을 사용할 수 있습니다.

유효성 검사 규칙을 이해하기 위해 input 태그의 title 속성을 사용할 수도 있습니다. 최소 및 최대 길이에 대한 정규식 패턴을 지정할 수 있습니다.

예를 들어, 양식을 만들고 내부에 type 암호가 포함된 input 태그를 작성합니다.

다음으로 pattern 속성을 사용하여 정규식 패턴 .{8,}을 작성합니다. 그런 다음 title 속성에 minimum eight characters needed라는 텍스트를 작성합니다.

마지막으로 태그에 required 속성을 작성하고 제출 버튼을 만듭니다.

여기에서 입력의 최소 길이가 8인 정규식을 만들었습니다. 길이가 8자 미만인 양식을 제출하려고 하면 양식이 제출되지 않습니다.

title 속성의 메시지는 이러한 조건에서 표시됩니다. NS . 정규식에서 는 새 줄을 제외한 모든 문자를 나타냅니다. 최대 길이를 설정하기 위해 쉼표 뒤에 다른 숫자를 추가할 수 있습니다.

required 속성은 값이 제공되지 않을 때 양식이 제출되지 않도록 합니다. 따라서 pattern 속성을 사용하여 HTML에서 길이 유효성 검사를 설정할 수 있습니다.

예제 코드:

<form action="#">
    Password<input type="password" pattern=".{8,}" title="minimum eight characters needed" required>
    <input type="submit">
</form>

minlength 속성을 사용하여 HTML에서 최소 길이 유효성 설정

HTML은 input 필드에서 최소 길이 유효성 검사를 설정하기 위해 minlength라는 속성을 제공합니다. pattern 속성과 마찬가지로 모든 입력 유형에서 작동합니다.

예를 들어 양식을 만든 다음 암호 입력 필드를 만듭니다. 그런 다음 input 태그에 minlength 속성을 작성하고 속성 값을 8로 설정하고 마지막으로 제출 버튼을 만듭니다.

여기서 길이 유효성 검사는 첫 번째 방법과 동일하게 작동합니다. 8자 미만의 값을 입력하면 양식이 제출되지 않습니다.

maxlength 속성을 사용하여 최대 길이를 설정할 수도 있습니다. 따라서 minlength 속성을 사용하여 HTML에서 최소 길이 유효성 검사를 설정할 수 있습니다.

예제 코드:

<form action="#">
    Password
    <input type="password" minlength="8">
    <input type="submit">
</form>