HTML 대화형 양식 유효성 검사

HTML로 양식을 작성하는 것은 항상 약간 복잡합니다. 먼저 HTML 마크업을 올바르게 작성해야 하며, 제출하기 전에 각 양식 항목에 사용 가능한 값이 있는지 확인하고, 마지막으로 문제가 있을 때 사용자에게 경고해야 합니다.

다행히도 HTML5에는 이 작업을 훨씬 쉽게 해주는 몇 가지 새로운 기능이 도입되었습니다. 특히 양식 컨트롤은 제약 조건을 지원하도록 확장되어 브라우저가 JavaScript를 사용하지 않고도 클라이언트 측에서 양식 콘텐츠의 유효성을 검사할 수 있습니다.

WebKit은 이미 부분적으로 지원됩니다. 이제 양식 컨트롤의 속성을 사용하여 제약 조건을 설명한 다음 JavaScript의 checkValidity() API를 사용하여 양식 컨트롤과 전체 양식 입력의 유효성을 쿼리할 수 있습니다. ValidityState API를 사용하여 어떤 제약 조건이 위반되었는지 파악하는 것도 가능합니다.

그러나 WebKit은 이전에 양식을 제출할 때(ff9c23ada1bcecdd1a0fb5d5a0f18437 요소에 novalidate 속성이 설정되지 않은 경우) 또는 reportValidity() API를 사용할 때 발생하는 대화형 HTML 양식 유효성 검사를 지원하지 않았습니다. 또한 이제 Safari Technology Preview 19에서 이 기능이 활성화되어 Webkit이 이를 지원하게 되었음을 발표하게 되어 기쁘게 생각합니다. 대화형 양식 유효성 검사를 통해 WebKit은 이제 양식의 모든 양식 컨트롤의 유효성을 검사합니다. 하나의 양식 컨트롤이라도 제약 조건을 위반하는 경우 WebKit은 첫 번째 양식 컨트롤에 입력 포커스를 두고 인터페이스 페이지를 스크롤하여 컨트롤을 표시한 다음 그 옆에 문제를 설명하는 버블 메시지를 표시합니다.

검증 제약

​입력 유형

일부 입력 유형에는 고유한 제약이 있습니다. 유형이 "이메일", "번호" 또는 "URL"로 설정된 경우 입력한 값이 유효한 이메일 주소, 번호 또는 URL인지 자동으로 확인합니다(예:

<input type="email">

). 확인 속성

다음 속성을 사용하여 양식 컨트롤의 제약 조건을 설명할 수 있습니다.

• 필수: 사용자에게 값을 입력해야 함을 알려줍니다.

• 
  

• 패턴="[a-z]": 사용자에게 주어진 JavaScript 정규식과 일치하는 값을 입력해야 함을 알려줍니다.

• 
  

• minlength=x: 사용자에게 x자 이상의 값을 입력해야 한다고 알려줍니다.

• 
  

• maxlength=y: 사용자에게 최대 x자의 값을 입력해야 한다고 알려줍니다.

• 
  

• min=x: 사용자에게 x보다 크거나 같은 값을 입력해야 한다고 알려줍니다. .

• 
  

• max=y: 사용자에게 y보다 작거나 같은 값을 입력해야 한다고 알려줍니다.

• 
  

• step=x: 사용자에게 최소값에 x의 배수를 더한 값을 입력해야 한다고 알려줍니다.

제약조건 검증

제약 조건 확인은 다음과 같은 중앙 집중식 방식으로 트리거될 수 있습니다.

• checkValidity()는 양식 요소나 특정 양식 컨트롤에서 호출될 수 있습니다. 제약 조건을 위반하면 이 메서드는 false를 반환합니다. 동시에 제약 조건을 위반하는 요소에 대해 "invalid"라는 이벤트도 트리거됩니다. 양식 컨트롤의 "validity" 속성을 통해 노출된 ValidityState 개체를 사용하여 어떤 제약 조건이 위반되었는지 확인할 수 있습니다.

• 
  

• reportValidity()는 양식 제약 조건이나 특정 양식 컨트롤에서 호출될 수 있습니다. 그렇게 하면 제약 조건에 대한 대화형 검증이 시작됩니다. 또한 checkValidity() 및 ReportValidity()는 제약 조건을 위반한 것으로 확인된 첫 번째 요소에 입력 포커스를 두고 그 옆에 문제를 설명하는 버블 메시지를 표시합니다.

• 
  

• ff9c23ada1bcecdd1a0fb5d5a0f18437 요소에 "novalidate" 속성이 설정되어 있지 않으면 양식이 제출될 때 대화형 양식 유효성 검사도 수행됩니다.

사용자 정의 제약 조건

유효성 검사에 JavaScript를 사용하고 setCustomValidity() API를 활용하면 더 복잡한 유효성 검사 제약 조건을 구현하거나 제약 조건을 위반하는 입력에 더 유용한 오류 메시지를 제공할 수 있습니다.

JavaScript는 양식 컨트롤(예: onchange, oninput 등)에서 지정된 이벤트를 수신하여 트리거될 수 있습니다. 실행된 JavaScript 코드는 양식 컨트롤의 데이터를 확인한 다음 setCustomValidity()를 사용하여 컨트롤의 오류 메시지를 업데이트할 수 있습니다:

<label for="feeling">Feeling:</label>
<input id="feeling" type="text" oninput="validateFeeling(this)">
<script>
 function validateFeeling(input) {
   if (input.value == "good" || input.value == "fine" || input.value == "tired") {
     input.setCustomValidity(&#39;"&#39; + input.value + &#39;" is not a feeling&#39;);
   } else {
     // The data is valid, reset the error message.
     input.setCustomValidity(&#39;&#39;);
   }
 }
</script>

확인 메시지 풍선 프롬프트

대화형 양식 유효성 검사를 수행할 때 다음과 같이 유효성 검사 중인 제약 조건을 위반하는 데이터가 있는 첫 번째 양식 컨트롤 옆에 문제를 설명하는 버블 프롬프트가 표시됩니다.

일부 현지화된 확인 메시지는 특정 제약 조건에 대해 기본적으로 설정됩니다. 유효성 검사 메시지를 사용자 정의하려면 setCustomValidity() API 사용을 고려하세요. WebKit은 JavaScript의 국제화 API도 지원하므로 사용자 정의 확인 메시지를 현지화하는 데 도움이 됩니다.

요약

HTML 대화형 양식 유효성 검사는 이제 Webkit에서 지원되며 Safari Technology Preview 19에서 활성화됩니다. 이 기능을 경험하려면 온라인 데모를 시도해 보십시오. 버그를 신고하는 것도 환영합니다.

위 내용은 HTML 대화형 양식 유효성 검사의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!