HTML 양식 및 제약 조건 검증에 대한 완전한 안내서

이 기사에서는 HTML 양식 필드와 HTML5에서 제공하는 검증 옵션을 살펴 봅니다. 또한 CSS 및 JavaScript를 사용하여 어떻게 향상 될 수 있는지 살펴볼 것입니다. 키 테이크 아웃

html5는 많은 유효성 검사 프로세스를 자동화하는 새로운 입력 유형과 속성을 도입하여 양식 검증을 향상시켜 광범위한 JavaScript의 필요성을 줄입니다. html5에서의 제한 유효성 검증 브라우저는 양식 제출 전에 지정된 규칙에 대한 사용자 입력을 자동으로 확인하여 사용자 경험 및 데이터 무결성을 향상시킬 수 있습니다. 클라이언트 측 유효성 검사는 일반적인 오류를 포착하는 데 도움이되지만 데이터 보안 및 무결성을 보장하려면 서버 측 유효성 검사를 보완해야합니다. Custom JavaScript 입력은 접근성을 복잡하게하고 기본 브라우저 기능과 충돌 할 수 있으므로 가능한 경우 피해야합니다. CSS는 유효성 및 : 무효, 사용자 입력에 대한 동적 피드백을 허용하는 유효성과 같은 의사 클래스를 사용하여 유효성 검사 상태를 기반으로 입력 필드를 스타일링하는 데 사용될 수 있습니다. html5의 제약 조건 검증 API는 HTML만으로는 두 개의 필드 또는 비동기 검사를 비교하고 양식 기능 및 사용자 상호 작용 강화와 같은 사용자 정의 유효성 검사 시나리오를 활성화합니다.

제약 조건 검증이란 무엇입니까? 모든 형태의 필드에는 목적이 있습니다. 그리고이 목적은 종종 금기 또는 각 양식 필드에 입력되어서는 안되는 규칙에 따라 통제됩니다. 예를 들어, 이메일 필드에는 유효한 이메일 주소가 필요합니다. 비밀번호 필드에는 특정 유형의 문자가 필요할 수 있으며 최소 수의 필요한 문자가 있습니다. 텍스트 필드는 입력 할 수있는 문자 수에 제한이있을 수 있습니다.

최신 브라우저는 이러한 제약이 사용자가 관찰되고 있는지 확인할 수 있으며 해당 규칙이 위반되었을 때 경고 할 수 있습니다. 이것을 contstraint 검증으로 알려져 있습니다 클라이언트 측 대 서버 측 유효성 검사

언어 초기에 작성된 대부분의 JavaScript 코드는 클라이언트 측 양식 검증을 처리했습니다. 오늘날에도 개발자는 필드 값을 확인하기 위해 기능을 작성하는 데 상당한 시간을 소비합니다. 이것은 여전히 ​​현대식 브라우저에서 필요합니까? 아마도 <.>가 아닙니다. 대부분의 경우, 그것은 실제로 당신이하려는 일에 달려 있습니다.

그러나 먼저, 여기에 큰 경고 메시지가 있습니다 :
클라이언트 측 유효성 검사는 앱이 시간을 낭비하고 대역폭을 서버로 전송하기 전에 공통 데이터 입력 오류를 방지 할 수있는 긍정적입니다. 서버 측 유효성 검사를 대체 할 수 없습니다!
• 항상 데이터 서버 측면을 소독합니다. 모든 요청이 브라우저에서 나오는 것은 아닙니다. 그렇게 되더라도 브라우저가 데이터를 검증 한 보장은 없습니다. 브라우저의 개발자 도구를 열는 방법을 아는 사람은 사랑스럽게 제작 된 HTML 및 JavaScript를 우회 할 수 있습니다. html5 입력 필드

  html 제안 :

  다중 텍스트 상자의 경우 옵션의 드롭 다운 목록 …
  그러나 가장 자주 을 사용합니다 :
  • 유형 속성은 제어 유형을 설정하고 다양한 옵션이 있습니다.
  • 타입
  설명
  • 단추 기본 동작이없는 버튼 확인란 수표/진드기 상자 색상 컬러 피커 날짜 연도, 월 및 요일의 날짜 선택기 DateTime-local 날짜와 시간 선택기 이메일 이메일 입력 필드 파일 파일 선택기 숨겨진 숨겨진 필드 영상 SRC 속성으로 정의 된 이미지를 표시하는 버튼 월 한 달 및 연도 피커 숫자 숫자 입력 필드 비밀번호 가려진 텍스트가있는 비밀번호 입력 필드 라디오 라디오 버튼 범위 슬라이더 제어 다시 놓기 모든 양식 입력을 기본값으로 재설정하는 버튼 (그러나 거의 유용하지 않으므로이 사용을 피하십시오). 찾다 검색 입력 필드 제출하다 양식 제출 버튼 텔 전화 번호 입력 필드 텍스트 텍스트 입력 필드 시간 시간대가없는 시간 피커 URL URL 입력 필드 주 일주일 수와 연도 피커 유형 속성을 생략하거나 옵션을 지원하지 않으면 브라우저가 텍스트로 떨어집니다. 최신 브라우저에는 모든 유형을 지원하지만 오래된 브라우저는 여전히 텍스트 입력 필드를 표시합니다. 기타 유용한 속성에는 다음이 포함됩니다
  속성

  설명

  수용하다 파일 업로드 유형 대체 이미지 유형에 대한 대체 텍스트 자동 완성 필드 자동 완성에 대한 힌트 자동 초점 페이지로드에 초점 필드 포착 미디어 캡처 입력 방법 확인 확인란/라디오가 확인됩니다 장애가 있는 컨트롤 비활성화 (검증되지 않거나 가치가 제출되지 않음) 형태 이 ID를 사용하여 양식과 연결하십시오 형성 제출 및 이미지 버튼에 제출할 URL 입력 모드 데이터 유형 힌트 목록
. > checkValidity () : 입력이 유효 할 때 true를 반환합니다. Valitity.valid 속성은 똑같은 일을하지만 CheckValidity ()는 또한 유용 할 수있는 현장에서 유효하지 않은 이벤트를 트리거합니다.

validateform () 핸들러 함수는 모든 필드를 통과하고 필요한 경우 부모 요소에 유효하지 않은 클래스를 적용 할 수 있습니다.

HTML이 이메일 필드를 정의했다고 가정합니다

스크립트는 이메일이 지정되지 않았거나 유효하지 않은 경우

에 유효하지 않은 클래스를 적용합니다. CSS는 양식이 제출되었을 때 검증 메시지를 표시하거나 숨길 수 있습니다.

사용자 정의 양식 유효성 검사기 만들기 다음 데모는 사용자 이름과 이메일 주소, 전화 번호 또는 둘 다가 필요한 예제 연락처 양식을 보여줍니다.

펜을 참조하십시오 sitepoint의 구속 조건 유효성 검사 API 예제 (@SitePoint) Codepen에서.

는 FormValidate라는 일반적인 양식 검증 클래스를 사용하여 구현되었습니다. 객체를 인스턴스화 할 때 양식 요소가 전달됩니다. 옵션 두 번째 매개 변수를 설정할 수 있습니다 사용자가 그것과 상호 작용할 때 각 필드를 검증하는 것은 입니다. 첫 번째 제출 후 모든 필드를 검증하려는 false (기본값) .

<span><span><span><input</span> type<span>="text"</span> name<span>="username"</span> /></span>
</span>

.addCustom (field, func) 메소드는 사용자 정의 유효성 검사 함수를 정의합니다. 다음 코드는 이메일 또는 Tel 필드가 유효한지 확인합니다 (속성이 필요하지 않음) :

FormValidate 객체는 다음을 모두 모니터링합니다

포커스 아웃 이벤트, 그러면 개별 필드 를 확인하십시오 형식 제출 이벤트를 작성한 다음 모든 필드 를 확인하십시오
• 모두 .validatefield (필드) 메소드를 호출하여 필드가 표준 제한 조건 검증을 전달하는지 여부를 확인합니다. 그렇게하면 해당 필드에 할당 된 사용자 정의 검증 기능이 차례로 실행됩니다. 필드가 유효하기 위해서는 모두를 반환해야합니다.
잘못된 필드는 필드의 상위 요소에 잘못된 클래스가 적용되며 CSS를 사용하여 빨간색 도움말 메시지를 표시합니다.

가능한 경우 표준 HTML 입력 유형을 사용하십시오. 최소, 최대, 단계, 최소 길이, maxlength, 패턴, 요구, 입력 모드 및 자동 완성 속성을 적절하게 설정하십시오. 필요한 경우 약간의 JavaScript를 사용하여 사용자 정의 검증 및 메시지를 활성화하십시오. 더 복잡한 필드의 경우 표준 입력을 점차적으로 향상시킵니다

마지막으로

: 인터넷 익스플로러를 잊어 버리십시오!

클라이언트가 주로 IE 사용자가 아니라면 자체 폴백 유효성 검사 기능을 구현할 필요가 없습니다. 모든 HTML5 입력 필드는 IE에서 작동하지만 더 많은 사용자 노력이 필요할 수 있습니다. (예를 들어, 즉, 잘못된 이메일 주소를 입력 할 때는 감지하지 않습니다.) 서버의 데이터를 검증해야하므로 IE 오류 확인의 기초로 사용하는 것이 좋습니다.

. HTML 양식 및 제약 조건 검증에서 자주 묻는 질문 (FAQ) HTML 양식 검증의 중요성은 무엇입니까?

HTML 양식 검증은 웹 개발의 중요한 측면입니다. 사용자가 입력 한 데이터가 양식으로 입력 한 데이터가 서버로 전송되기 전에 특정 기준을 충족하도록합니다. 이는 데이터의 무결성을 유지할뿐만 아니라 입력 된 데이터의 정확성에 대한 즉각적인 피드백을 제공하여 사용자 경험을 향상시킵니다. 양식 검증이 없으면 부정확하거나 불완전하거나 악의적 인 데이터를받을 위험이 있으며, 이는 데이터 손상, 보안 위반 및 시스템 충돌을 포함한 다양한 문제로 이어질 수 있습니다. html5는 양식 검증을 개선하는 방법?

HTML5는 양식 검증을 훨씬 쉽고 효율적으로 만드는 몇 가지 새로운 양식 요소와 속성을 소개합니다. 예를 들어, 이메일, URL 및 숫자와 같은 새로운 입력 유형을 제공하여 유형에 따라 입력 데이터를 자동으로 검증합니다. 또한 입력 데이터에 대한 다양한 제약 조건을 지정할 수있는 필요한, Pattern 및 Min/Max와 같은 새로운 속성을 도입합니다. 또한 HTML5는 JavaScript를 사용하여 사용자 정의 유효성 검사를 수행 할 수있는 내장 유효성 검사 API를 제공합니다.

JavaScript없이 양식 유효성 검사를 수행 할 수 있습니까?

예, HTML5를 사용하여 기본 양식 유효성 검사를 수행 할 수 있습니다. 홀로. HTML5는 입력 데이터에 대한 다양한 제약 조건을 지정할 수있는 몇 가지 새로운 입력 유형 및 속성을 제공합니다. 예를 들어, 필수 속성을 사용하여 필드 필드, 특정 형식을 시행하기위한 패턴 속성 및 Min/Max 속성을 사용하여 숫자 입력 범위를 설정할 수 있습니다. 그러나보다 복잡한 유효성 검사를 위해서는 여전히 JavaScript를 사용해야 할 수도 있습니다.

HTML5 양식 유효성 검사에서 오류 메시지를 사용자 정의하는 방법은 무엇입니까?

HTML5는 유효성 검사 API를 제공하는 유효성 검사 API를 제공합니다. 오류 메시지. ValidityState 객체의 setCustomValidity 메소드를 사용하여 필드에 대한 사용자 정의 오류 메시지를 설정할 수 있습니다. 이 메소드는 문자열 인수를 취하며 필드가 유효하지 않은 경우 필드의 검증 메시지가됩니다. 필드가 유효성 검사에 실패 할 때 해고되는 유효하지 않은 이벤트에 대한 응답 으로이 메소드를 호출 할 수 있습니다.

html5 양식 검증을 비활성화하려면 어떻게해야합니까?

추가하여 HTML5 양식 유효성 검사를 비활성화 할 수 있습니다. 양식 요소에 대한 novalidate 속성. 이 속성이 있으면 브라우저는 제출 될 때 양식에 대한 유효성 검사를 수행하지 않습니다. 서버 측 또는 사용자 정의 JavaScript를 사용하여 유효성 검사를 처리하려는 경우 유용 할 수 있습니다.

HTML5에서 여러 필드를 함께 검증하는 방법은 무엇입니까?

HTML5는 내장을 제공하지 않습니다. 여러 필드를 함께 검증하는 방법. 그러나 JavaScript를 사용하여이를 달성 할 수 있습니다. 여러 필드의 값을 확인하고 필요한 기준을 충족하지 않으면 사용자 정의 유효성 메시지를 설정하는 사용자 정의 검증 함수를 작성할 수 있습니다. 양식 제출 이벤트 또는 필드의 입력/변경 이벤트에 대한 응답 으로이 기능을 호출 할 수 있습니다.

html5의 다른 필드의 값에 따라 필드를 어떻게 검증 할 수 있습니까? html5 다른 필드의 값에 따라 필드를 검증하는 내장 방법을 제공하지 않습니다. 그러나 JavaScript를 사용하여이를 달성 할 수 있습니다. 다른 필드의 값에 대해 한 필드의 값을 확인하고 일치하지 않으면 사용자 정의 유효성 메시지를 설정하는 사용자 정의 검증 함수를 작성할 수 있습니다. 필드의 입력/변경 이벤트에 대한 응답 으로이 기능을 호출 할 수 있습니다. html5에서 비동기 검증을 수행하려면 어떻게 할 수 있습니까?

html5는 상자에서 비동기 검증을 지원하지 않습니다. 그러나 JavaScript를 사용하여이를 달성 할 수 있습니다. AJAX 요청과 같은 비동기 조작을 수행하는 사용자 정의 검증 함수를 작성하고 결과를 기반으로 사용자 정의 유효성 메시지를 설정할 수 있습니다. 필드의 입력/변경 이벤트 또는 양식 제출 이벤트에 대한 응답 으로이 기능을 호출 할 수 있습니다.

html5 양식 검증에서 오류 메시지를 어떻게 스타일링 할 수 있습니까?

오류의 모양 HTML5 양식 유효성 검사의 메시지는 브라우저에 의해 결정되며 CSS를 사용하여 직접 스타일을 지정할 수 없습니다. 그러나 JavaScript를 사용하여 사용자 정의 오류 메시지를 작성하고 원하는대로 스타일을 지정할 수 있습니다. 유효성 검사 API를 사용하여 필드가 유효하지 않은시기를 결정하고 그에 따라 사용자 정의 오류 메시지를 표시 할 수 있습니다.

HTML 양식의 유효성 검사를 테스트하려면 어떻게해야합니까?

유효성 검사를 테스트 할 수 있습니다. 다양한 유형의 데이터를 필드에 입력하고 양식을 제출하려고하는 HTML 양식. 유효한 데이터와 유효하지 않은 데이터로 테스트하여 모든 경우 유효성 검사가 올바르게 작동하는지 확인해야합니다. 자동화 된 테스트 도구 또는 라이브러리를 사용하여보다 포괄적 인 테스트를 수행 할 수도 있습니다.

위 내용은 HTML 양식 및 제약 조건 검증에 대한 완전한 안내서의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!