HTML 속성을 사용하여 클라이언트 측 양식 유효성 검사 구현.

HTML 속성을 사용하여 JavaScript없이 클라이언트 측 양식 유효성 검사를 수행 할 수 있습니다. 1) 필수 필드를 시행하는 데 필요한 사용. 2) 이메일 또는 URL과 같은 유형 속성으로 이메일 및 URL을 검증하거나 사용자 정의 형식에 대한 REGEX와 함께 패턴을 사용하십시오. 3) 최소, 최대, 최소 및 최대 길이를 사용한 값을 제한합니다. 4) 제한 유효성 검사 API로 오류 메시지를 사용자 정의하지만 제한적이고 클라이언트 측만 가능합니다. 보안 및 정확성을 위해 서버 측에서 항상 데이터를 다시 검증하십시오.

클라이언트 측 양식 검증은 사용자 친화적이고 안전한 웹 양식을 구축하는 데있어 핵심 부분입니다. 좋은 소식? 당신은 항상 JavaScript가 필요하지는 않습니다. HTML에는 브라우저에서 기본 사용자 입력을 바로 검증 할 수있는 내장 속성이 있습니다. 과도하게 복잡하지 않고 효과적으로 사용하는 방법은 다음과 같습니다.

필수 필드에 required 사용

가장 간단하고 가장 일반적인 검증 속성이 required . 입력 필드에 추가되면 브라우저에 양식을 제출하기 전에 사용자가 작성해야한다고 알려줍니다.

예를 들어:

 <입력 유형 = "텍스트"이름 = "사용자 이름"필수>

이것은 이름, 이메일, 비밀번호와 같은 필드에 적합합니다. 비워 두는 곳은 다음 단계를 끊을 것입니다. 누군가가 채우지 않고 제출하려고 시도하면 브라우저에는 기본 메시지가 표시됩니다.

Pro Tip : 이메일이 실제 이메일 주소처럼 보이는 것과 같이 더 강력한 검증을 위해 다른 required 과 결합하십시오.

type 과 pattern 으로 이메일 및 URL 입력을 확인하십시오

HTML5는 email , url 및 number 와 같은 여러 입력 유형을 도입하여 형식이 예상 대상과 일치하는지 자동으로 확인했습니다.

예를 들어:

 <입력 유형 = "이메일"이름 = "이메일"필수>

이렇게하면 사용자가 이메일처럼 보이는 무언가 (user@example.com)를 입력 할 수 있습니다. URL도 마찬가지입니다. 특정 형식을 시행하는 것과 같이 더 많은 제어를 원한다면 정규 표현식으로 pattern 속성을 사용하십시오.

예:

 <입력 유형 = "text"name = "ZipCode"Pattern = "\ d {5}"필수>

이 라인은 5 자리 우편 번호 만 허용합니다. 이것은 편리하지만 REGEX는 까다로워 질 수 있습니다. 패턴을주의 깊게 테스트하십시오.

min , max 및 minlength / maxlength 로 최소 및 최대 값을 설정

때로는 누군가가 입장 할 수있는 금액을 제한해야합니다. 숫자, 날짜 또는 텍스트 길이의 경우 이러한 속성은 친구입니다.

• min 및 max 수와 날짜 입력 작업
• 텍스트 기반 입력의 minlength 및 maxlength 의 문자 제한

예 :

 <입력 유형 = "number"name = "age"min = "18"max = "99">
<입력 유형 = "텍스트"이름 = "username"minlength = "3"maxlength = "20">

이는 터무니없는 긴 사용자 이름이나 의미가없는 연령 값과 같은 에지 케이스를 방지하는 데 도움이됩니다.

기억해야 할 몇 가지 사항 :

• 이 수표는 양식 제출에서만 발생합니다.
• 사용자는 여전히 유효하지 않은 값을 입력 할 수 있지만 양식은 수정 될 때까지 폼을 통과하지 않습니다.

오류 메시지 사용자 정의 (일부 제한 사항 포함)

기본적으로 브라우저는 유효성 검사가 실패하면 자체 오류 메시지를 표시합니다. 그러나 JavaScript의 제한 조건 검증 API를 사용하여 해당 메시지를 조정할 수 있습니다.

다음은 메시지를 변경하는 빠른 방법입니다.

 <입력 유형 = "이메일"id = "이메일"필수>
<cript>
  const emailinput = document.getElementById ( &#39;email&#39;);
  emailInput.addeventListener ( &#39;invalid&#39;, function (e) {
    E.TARGET.SETCUSTOMVALIDIC ( &#39;유효한 이메일 주소를 입력하십시오.&#39;);
  });
</스크립트>

이렇게하면 전체 유효성 검사를 대체하지 않습니다. 사용자는 여전히 클라이언트 측 확인을 완전히 우회 할 수 있습니다. 따라서 항상 서버 측의 데이터를 다시 확인하십시오.

기본적으로 HTML 형식 검증 속성은 최소한의 노력으로 많은 힘을 제공합니다. 사용자 정의 스크립트를 작성하지 않고 간단한 점검과 사용자 경험을 향상시키는 데 좋습니다. 보안이나 복잡한 논리를 위해 혼자 의존하지 마십시오. 백엔드 검증의 것입니다.

위 내용은 HTML 속성을 사용하여 클라이언트 측 양식 유효성 검사 구현.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!