HTML5는 JavaScript없이 양식의 사용자 입력을 검증하는 데 사용할 수있는 몇 가지 새로운 속성을 소개합니다. 이 HTML5 양식 검증 속성을 사용하려면 HTML 양식 요소에 추가하면됩니다. 당신이 할 수있는 방법은 다음과 같습니다.
필수 속성 : required 속성은 양식을 제출하기 전에 필드를 작성해야합니다. 텍스트 입력, TextAreas 또는 Select와 같은 모든 양식 컨트롤에 추가 할 수 있습니다. 예를 들어:
<code class="html"><input type="text" name="username" required></code>
패턴 속성 : pattern 속성을 사용하면 사용자의 입력이 일치 해야하는 정규 표현식을 지정할 수 있습니다. 이것은 전화 번호, 이메일 주소 등과 같은 형식을 검증하는 데 유용합니다.
<code class="html"><input type="text" name="phone" pattern="[0-9]{3}-[0-9]{3}-[0-9]{4}" title="Please enter a phone number in the format XXX-XXX-XXXX"></code> 최소 및 최대 속성 : 이러한 속성은 숫자 입력 유형 ( number , range , date 등)과 함께 사용하여 사용자가 입력 할 수있는 최소 및 최대 값을 설정할 수 있습니다. 예를 들어:
<code class="html"><input type="number" name="age" min="18" max="100"></code>
MaxLength 및 Minlength 속성 : 이러한 속성을 사용하여 입력 필드에 입력 할 수있는 최대 및 최소 텍스트 길이를 설정할 수 있습니다. 예를 들어:
<code class="html"><input type="password" name="password" minlength="8" maxlength="20"></code>
이러한 속성을 사용하면 양식 데이터가 제출하기 전에 브라우저에서 직접 특정 기준을 충족하는지 확인할 수 있습니다.
HTML5는 특정 데이터 유효성 검사 규칙을 시행하기 위해 요소를 양식에 적용 할 수있는 다양한 검증 속성을 제공합니다. HTML5 검증 속성의 주요 유형은 다음과 같습니다.
number 또는 range 입력 유형과 함께 사용되는 입력 필드의 법적 번호 간격을 지정합니다.type 속성 자체는 유효성 검사를 시행 할 수 있습니다 (예 : type="email" 또는 type="url" 각각 이메일 주소 또는 URL의 형식을 자동으로 시행합니다.이러한 속성은 브라우저에서 사용자 입력을 직접 검증하고 사용자 경험을 향상시키고 서버 측 유효성 검사로드를 줄이는 강력한 방법을 제공합니다.
HTML5를 사용하면 title 속성 또는 사용자 정의 JavaScript를 사용하여 유효성 검사가 실패 할 때 표시되는 오류 메시지를 사용자 정의 할 수 있습니다. 당신이 할 수있는 방법은 다음과 같습니다.
제목 속성 사용 : 오류 메시지를 사용자 정의하는 가장 간단한 방법은 pattern 속성과 함께 title 속성을 사용하는 것입니다. title 속성은 pattern 일치하지 않을 때 브라우저가 오류 메시지로 사용할 수있는 텍스트 설명을 제공합니다. 예를 들어:
<code class="html"><input type="text" name="username" pattern="[A-Za-z]{3,}" title="Username must be at least 3 letters and contain only letters"></code> JavaScript 사용 :보다 복잡한 시나리오를 사용하거나 오류 메시지를 더 많이 제어 해야하는 경우 JavaScript를 사용하여 유효성 검사 메시지를 사용자 정의 할 수 있습니다. 양식의 submit 이벤트가 트리거되면 각 필드의 유효성을 확인하고 setCustomValidity 메소드를 사용하여 사용자 정의 메시지를 설정할 수 있습니다. 예를 들어:
<code class="javascript">document.getElementById('myForm').addEventListener('submit', function(event) { if (!event.target.checkValidity()) { event.preventDefault(); var elements = event.target.elements; for (var i = 0; i </code>이를 통해 사용자에게 표시된 오류 메시지를 조정하여 전체 사용자 경험을 향상시킬 수 있습니다.
예, HTML5 양식 검증을 JavaScript와 결합하여보다 복잡한 검증 시나리오를 처리 할 수 있습니다. HTML5 속성은 기본 검증을위한 좋은 출발점을 제공하지만 JavaScript는보다 복잡한 검증 규칙 및 논리를 구현할 수있는 유연성을 제공합니다. 그것들을 결합하는 방법은 다음과 같습니다.
제출 이벤트 처리 : HTML5와 JavaScript 유효성 검사를 결합하려면 JavaScript의 양식 submit 이벤트를들을 수 있습니다. HTML5 유효성 검사에 실패하면 기본 조치 (양식 제출)가 방지됩니다. 그런 다음 JavaScript 유효성 검사 로직을 실행할 수 있습니다.
<code class="javascript">document.getElementById('myForm').addEventListener('submit', function(event) { if (!event.target.checkValidity()) { event.preventDefault(); // Handle HTML5 validation errors } else { // Perform additional JavaScript validation if (!moreComplexValidation()) { event.preventDefault(); // Show custom error messages } } }); function moreComplexValidation() { // Example of complex validation logic var password = document.getElementById('password').value; var confirmPassword = document.getElementById('confirmPassword').value; if (password !== confirmPassword) { document.getElementById('confirmPassword').setCustomValidity('Passwords do not match'); return false; } return true; }</code>HTML5와 JavaScript를 결합하면 두 가지 강점을 활용하여 단순하고 복잡한 시나리오를 수용하여 사용자 경험 및 데이터 무결성을 향상시키는 강력한 양식 검증 시스템을 생성 할 수 있습니다.
위 내용은 HTML5 양식 유효성 검사 속성을 사용하여 사용자 입력을 유효성있게하려면 어떻게합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
