양식 검증을 위해 HTML5 구속 조건 API를 사용합니다-JS 튜토리얼-php.cn

Using the HTML5 Constraint API for Form Validation

양식 검증을 위해 HTML5 구속 조건 API를 사용합니다 키 테이크 아웃

HTML5 제약 조건 API는 개발자가 기본 유효성 검사에 JavaScript를 사용하지 않도록하여 프로세스를보다 사용자와 개발자에게 친숙하게 만들어 양식 검증을 단순화합니다. 기본 유효성 검사는 "이메일"또는 "URL"과 같은 입력 요소의 유형 속성에 적절한 값을 사용하여 달성 할 수 있습니다. 패턴, 필수, maxlength, min 및 max와 같은 추가 유효성 검사 속성은 기본 제약 조건을 구현하는 데 사용될 수 있습니다. 복잡한 유효성 검사 로직의 경우 HTML5 구속 조건 API를 사용하여 클라이언트 측 유효성 검사 및 표시 오류 메시지를 수행 할 수 있습니다. API에는 필드를 유효하거나 유효하지 않은 것으로 표시하고 사용자 정의 오류 메시지를 표시하는 데 사용할 수있는 setCustomValidity () 메소드가 포함되어 있습니다.

웹 양식을 검증하는 것은 항상 많은 개발자에게 고통스러운 작업이었습니다. 사용자와 개발자 친화적 인 방식으로 클라이언트 측 유효성 검사를 수행하는 것은 정말 어렵습니다. 또한 유쾌한 방식으로 검증 오류에 대해 사용자에게 알리는 것은 지루한 작업입니다. HTML5 구속 조건 검증 API는 개발자가 간단한 검증을 위해 JavaScript를 사용하지 않도록 도와줍니다. 복잡한 유효성 검사 로직의 경우 API를 클라이언트 측 유효성 검사를 수행하고 오류 메시지를 매우 쉽게 표시하는 데 사용할 수 있습니다. 이 튜토리얼에서는 HTML5 구속력 검증 API에 대한 개요를 제공하고 더 나은 웹 양식을 작성하기 위해 프로젝트에서 사용하는 방법에 대해 논의합니다. 더 나아 가기 전에이 호환성 차트를 확인하여 브라우저에서 지원하는 기능을 확인하십시오. HTML5 제한 조건 검증 API는 양식 필드를 검증하는 훌륭한 방법을 제공하지만 서버 측 유효성 검사를 항상 수행해야합니다. 기본 제약 조건 검증 기본 유효성 검사는 입력 요소의 유형 속성에 가장 적합한 값을 선택하여 수행 할 수 있습니다. 예를 들어 다음 HTML을 작성하여 이메일을 확인할 수 있습니다.

유형의 값으로 이메일 또는 URL을 사용하여 속성, 제약 조건이 자동으로 추가되고 양식이 제출되면 필드가 자동으로 검증됩니다. 브라우저는 유효성 검사 오류가 발생하면 사용자 친화적 인 방식으로 오류 메시지를 표시합니다. 양식 내에 사용할 수있는 몇 가지 검증 기반 속성도 있습니다. 다음은 기본 제약 조건을 구현하는 데 사용할 수있는 속성 중 일부입니다.
양식이 제출되면 입력 필드에서 검증이 수행됩니다. 결과적으로 ABCD와 같은 값은이 경우 검증을 전달하지 않습니다.

필수 : 필수 속성은 입력 요소에 대해 값을 지정해야 함을 나타냅니다.

위의 스 니펫은 필요한 속성을 사용합니다. 필드를 비워두고 양식을 제출하려고하면 유효성 검사 오류가 발생합니다.

<span><span><span><input</span> type<span>=”email”</span> /></span>		//The field value must be an email</span>

로그인 후 복사

<:> maxlength : 이것은 특정 입력 필드에 허용되는 최대 문자 수를 지정하는 정수 값입니다.

위의 스 니펫은 입력 필드에 상한을 추가합니다. 이 입력 요소에 입력 된 값의 길이는 20 자 미만이어야합니다.

<: min max :> 복잡한 제약 조건 처리 복잡한 유효성 검사 로직은 HTML5 구속 조건 API를 사용하여 쉽게 처리 할 수 있습니다. 예를 들어, 비밀번호 필드와 암호 확인 필드를 가질 수 있습니다. 제출시 두 필드의 값이 동일해야합니다. 그렇지 않은 경우 오류 메시지를 사용자에게 표시해야합니다. 이것은 실제로 HTML5 구속 조건 API로 매우 쉽게 수행 할 수 있습니다. 먼저 OnChange 리스너를 비밀번호 필드에 첨부해야합니다. 다음 스 니펫은 HTML 양식을 보여줍니다.

모든 필드가 완전히 검증 될 때까지 제출 이벤트가 없으므로 양식이 언제 제출되는지 알 수있는 방법이 없습니다. 그래서 우리는 변화 이벤트에 관심이있는 이유입니다. 변경 이벤트가 시작될 때마다 두 가지 암호 모두 일치하는지 확인해야합니다. 그렇다면 입력 요소 (이 경우 비밀번호 필드)에서 setCustomValidity ()를 공허한 문자열로 인수로 호출합니다. 즉, 비밀번호 필드가 유효한 것으로 표시되므로 양식이 제출되면 유효성 검사 오류가 없습니다. 반면에, 우리는 암호가 변경에 일치하지 않는 것을 감지하면 이벤트 우리는 오류 메시지를 인수로서 setCustomValidity ()라고 부릅니다. 이는 암호 필드가 유효하지 않은 것으로 표시되고 사용자가 양식을 제출할 때 오류 메시지가 표시됩니다. 다음 JavaScript는이 논리를 구현합니다.

위의 접근 방식을 사용하는 데있어 가장 좋은 점은 오류 메시지를 사용자에게 제시하는 방법에 대해 걱정할 필요가 없다는 것입니다. 적절한 인수와 함께 간단한 방법 인 SetCustomValidity ()를 호출하면 그에 따라 오류 메시지가 표시됩니다.

<span><span><span><input</span> type<span>=”email”</span> /></span>		//The field value must be an email</span>

로그인 후 복사

결론

<span><span><span><input</span> type<span>=”URL”</span> /></span>			// The field value must be a URL</span>

로그인 후 복사

HTML5 구속 조건 검증 API를 사용하여 많은 간단한 고급 제약 조건을 구현할 수 있습니다. API는 유효성 검사 프로세스를 사용자 정의하기위한 거대한 도구 세트를 제공합니다. 우리는 방금 API의 일부에 대해 논의했습니다. CSS 후크와 같은 고급 개념에 대해 알기 위해 유효성 상태는 Mozilla 에서이 자습서를 확인하십시오. 양식 검증에 대한 HTML5 제약 조건 API에 대한 자주 묻는 질문 HTML5 제약 조건 API 란 무엇이며 양식 검증에 중요한 이유는 무엇입니까? HTML5 제약 조건 API는 사용자 정의 검증 규칙을 만들 수있는 양식 요소에서 사용 가능한 일련의 메소드 및 속성입니다. 양식 검증에 중요합니다. 사용자 입력이 제출되기 전에 특정 기준을 충족하도록하는 표준화 된 방법을 제공하므로 중요합니다. 이를 통해 입력의 유효성에 대한 즉각적인 피드백을 제공하여 오류를 방지하고 사용자 경험을 향상시킬 수 있습니다. 제약 조건 API가 기존의 JavaScript 유효성 검사 방법과 어떻게 다른가?

전통적인 JavaScript 유효성 검사 방법에는 종종 각 양식 필드에 대한 사용자 정의 코드를 작성하는 것이 포함됩니다. 이것은 시간이 많이 걸리고 오류가 발생할 수 있습니다. 반면에 제약 조건 API는 형태 필드를 검증하는 데 사용할 수있는 표준화 된 방법 및 속성 세트를 제공합니다. 이로 인해 코드가보다 효율적이고 유지 관리하기가 더 쉬워 질 수 있습니다.

모든 유형의 폼 필드와 함께 제약 조건 API를 사용할 수 있습니까?

제약 조건 API는 대부분의 유형의 양식 필드와 함께 사용할 수 있습니다. 텍스트 필드, 확인란, 라디오 버튼 및 선택 메뉴를 포함합니다. 그러나 타사 라이브러리를 사용하여 생성 된 일부 유형의 사용자 정의 양식 필드 또는 필드에서는 작동하지 않을 수 있습니다.

제한 조건 API에 표시되는 오류 메시지를 사용자 정의 할 수 있습니까?

제한 조건 API 사용자 정의 오류 메시지를 설정할 수있는 setValidity 메소드를 제공합니다. 폼 필드가 유효성 검사에 실패 할 때 유효성 검사 속성과 함께이 메소드를 사용하여 사용자 정의 오류 메시지를 표시 할 수 있습니다.

제한 조건 API를 사용하여 서버 측에서 양식을 검증 할 수 있습니까?

. 제약 API는 클라이언트 측 기술로서 사용자의 브라우저에서 실행됩니다. 그러나 서버 측 유효성 검사 방법과 함께 사용하여보다 강력한 검증 솔루션을 제공 할 수 있습니다. 클라이언트 측 유효성 검사를 악의적 인 사용자가 우회 할 수 있으므로 서버 측에서 사용자 입력을 항상 검증하는 것이 중요합니다.

제한 조건 API를 사용하여 한 번에 여러 형태 필드를 검증하는 방법은 무엇입니까?

제약 조건 API는 한 번에 모든 필드를 양식으로 검증하는 데 사용할 수있는 체크 검전 메소드를 제공합니다. 이 메소드는 양식의 모든 필드가 유효한지 여부를 나타내는 부울 값을 반환합니다.

html5 양식 요소를 사용하여 생성 된 양식과 함께 제약 조건 API를 사용할 수 있습니까? HTML5 양식 요소와 함께 작업합니다. 이 요소를 검증하고 사용자 입력이 특정 기준을 충족하도록하는 데 사용할 수있는 일련의 방법과 속성을 제공합니다.

구속 조건 API를 사용하여 실시간으로 양식을 검증하는 방법은 무엇입니까?

제약 조건 API는 JavaScript 이벤트 리스너와 함께 사용하여 양식 필드를 실시간으로 검증 할 수 있습니다. 예를 들어, 입력 이벤트를 사용하여 사용자가 유형을 입력 할 때마다 필드를 검증 할 수 있습니다.

구속 조건 API를 사용하여 이전 브라우저에서 양식을 검증 할 수 있습니까?

제한 조건 API는 제한 조건 API입니다. HTML5의 기능이므로 이전 브라우저에서는 지원되지 않을 수 있습니다. 그러나 기능 감지를 사용하여 제약 조건 API를 사용할 수 있는지 확인하고 그렇지 않은 경우 폴백 유효성 검사 방법을 제공 할 수 있습니다. 제약 조건 API를 사용하여 모바일 컨텍스트에서 양식을 검증하는 방법?