HTML 대화형 양식 유효성 검사

검증 제약

​입력 유형

일부 입력 유형에는 고유한 제약이 있습니다. 유형이 "이메일", "번호" 또는 "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()는 제약 조건을 위반한 것으로 확인된 첫 번째 요소에 입력 포커스를 두고 그 옆에 문제를 설명하는 버블 메시지를 표시합니다.

• 
  

• 요소에 "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 중국어 웹사이트의 기타 관련 기사를 참조하세요!