<form></form>
요소와 양식 검증에 해당 속성을 어떻게 사용합니까? HTML5는 <form></form>
내 및 입력 요소 내의 속성을 통해 내장 양식 검증 기능을 제공합니다. 이를 통해 많은 경우에 광범위한 JavaScript가 필요하지 않아 개발 및 유지 보수가 단순화됩니다. 이러한 속성을 활용하는 방법은 다음과 같습니다.
required
속성 : 이 속성은 필드를 필수로 만듭니다. 사용자가 필드를 비워두고 양식을 제출하면 브라우저는 제출을 방지하고 기본 오류 메시지를 표시합니다. 예 : <input type="text" name="name" required>
pattern
속성 : 이 속성을 사용하면 입력에 대한 입력을 검증하기 위해 정규 표현식을 지정할 수 있습니다. 이것은 이메일 주소 또는 전화 번호와 같은 특정 형식을 시행하는 데 강력합니다. 예 : <input type="text" name="email" pattern="[a-z0-9._% -] @[a-z0-9.-] \.[az]{2,}$">
이 예제는 기본 이메일 패턴을 사용합니다. 생산 응용 프로그램에는보다 강력한 패턴이 필요할 수 있습니다.minlength
및 maxlength
속성 : 이 속성은 텍스트 입력 필드에 허용되는 최소 및 최대 문자 수를 지정합니다. 예 : <input type="text" name="password" minlength="8" maxlength="20">
min
및 max
속성 : 이 속성은 최소 및 최대 허용 가능한 값을 정의하기 위해 숫자 입력 유형 ( <input type="number">
)에 사용됩니다. 예 : <input type="number" name="age" min="18" max="100">
type
속성 : type
속성 자체는 유효성 검사에 중요한 역할을합니다. 예를 들어, type="email"
사용하면 브라우저의 내장 이메일 유효성 검사가 트리거되며 type="url"
URL을 유효하게합니다.element.validity.valid
, element.validity.valueMissing
) 및 오류 메시지 ( element.validationMessage
)에 액세스 할 수 있습니다.<form></form>
로 검증 한 후 양식 제출을 처리하기위한 모범 사례는 무엇입니까?HTML5 유효성 검사 후 효과적인 양식 제출의 효과적인 처리에는 클라이언트 측 및 (이상적으로) 서버 측 유효성 검사가 포함됩니다. 악의적 인 사용자가이를 우회 할 수 있으므로 클라이언트 측 유효성 검사에만 의존하는 것은 안전하지 않습니다.
submit
이벤트에 첨부하고 event.preventDefault()
. 그런 다음 JavaScript 유효성 검사가 통과 한 후에 만 양식을 제출하십시오.브라우저 기본 오류 메시지가 도움이되지만 사용자 정의 오류 메시지는 더 많은 컨텍스트와 명확성을 제공하여 사용자 경험을 크게 향상시킵니다.
setCustomValidity()
메소드 : setCustomValidity()
메소드를 사용하면 기본 오류 메시지를 사용자 정의 오류로 바꿀 수 있습니다. 이것은 JavaScript로 수행됩니다. 예:<code class="javascript">const myInput = document.getElementById("myInput"); if (myInput.value.length </code>
예, html5 양식 검증을 JavaScript와 통합하면 HTML5 속성의 기능만을 넘어서는보다 정교한 검증 규칙을 만들 수 있습니다.
input
이벤트 (실시간 유효성 검사) 또는 submit
이벤트 (제출 전 유효성)에있을 수 있습니다.fetch
또는 Ajax)을 사용하여 사용자 인터페이스를 차단하지 않도록하십시오.HTML5의 내장 검증의 힘을 JavaScript의 유연성과 결합하여 포괄적 인 검증으로 강력하고 사용자 친화적 인 양식을 만들 수 있습니다. 서버 측 유효성 검사는 보안에 중요합니다.
위 내용은 html5 & lt; form & gt; 형식 검증을위한 요소와 그 속성?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!