HTML5의 8가지 양식 유효성 검사 방법에 대한 자세한 소개

양식 유효성 검사에 대해 심도 있게 논의하기 전에 먼저 양식 유효성 검사의 진정한 의미에 대해 생각해 보겠습니다. 기본적으로 양식 유효성 검사는 유효하지 않은 제어 데이터를 감지하고 최종 사용자에게 이러한 오류를 표시하는 시스템입니다. 즉, 양식 유효성 검사는 양식이 서버에 제출되기 전에 양식에 대해 일련의 검사를 수행하고 사용자에게 오류를 수정하도록 알립니다.
그런데 양식 유효성 검사란 실제로 무엇입니까?
은 최적화입니다.
양식 유효성 검사가 최적화인 이유는 양식 유효성 검사 메커니즘만으로는 서버에 제출된 양식 데이터가 올바르고 유효한지 확인하기에 충분하지 않기 때문입니다. 반면에 양식 유효성 검사는 웹 응용 프로그램에서 오류가 더 빨리 발생하도록 설계되었습니다. 즉, 브라우저에 내장된 처리 메커니즘을 사용하여 웹 페이지에 잘못된 양식 컨트롤 값이 포함되어 있음을 사용자에게 알리는 것이 가장 좋습니다. 과거에는 서버가 사용자에게 잘못된 데이터를 입력했음을 알리기 위해 네트워크를 통해 데이터가 이동했습니다. 브라우저가 클라이언트를 떠나기 전에 오류를 포착할 수 있는 능력이 충분하다면 이를 활용해야 합니다.
그러나 브라우저 양식 확인만으로는 모든 오류를 처리하기에 충분하지 않습니다.
그런데 HTML5에는 양식 컨트롤의 데이터 정확성을 검증하는 8가지 방법이 도입되었습니다. 차례로 살펴보겠습니다. 먼저 유효성 검사 상태를 피드백하는 데 사용되는 ValidityState 개체를 소개하겠습니다.
Html5 양식 유효성 검사를 지원하는 브라우저에서 ValidityState 개체는 양식 컨트롤을 통해 액세스할 수 있습니다.

var valCheck = document.myForm.myInput.validity;

이 코드 줄은 myInput이라는 양식 요소의 ValidityState 개체를 가져옵니다. 객체에는 8가지 확인 상태 모두에 대한 참조와 최종 확인 결과가 포함되어 있습니다.
호출 방법은 다음과 같습니다.

valCheck.valid

실행 후 양식 컨트롤이 모든 유효성 검사 제약 조건을 통과했는지 여부를 나타내는 부울 값을 얻습니다. 유효한 속성은 최종 검증 결과로 간주될 수 있습니다. 8개의 제약 조건이 모두 통과되면 유효한 속성은 true이고, 그렇지 않으면 하나의 제약 조건이 실패하는 한 유효한 플래그는 false입니다.
앞서 언급했듯이 모든 양식 요소에는 8가지 유효성 검사 제약 조건이 있습니다. 각 조건에는 적절한 방법으로 액세스할 수 있는 ValidityState 개체에 해당 속성 이름이 있습니다. 양식 컨트롤과 어떻게 연관되어 있는지, ValidityState 개체를 기반으로 확인하는 방법을 알아보기 위해 하나씩 분석해 보겠습니다.
1. valueMissing
목적: 양식 컨트롤이 채워졌습니다.
사용법: 양식 컨트롤에서 필수 속성을 true로 설정합니다.
예:

<input type="text" name="myText" required>

상세 설명: 양식 컨트롤이 필수 속성을 설정하는 경우 사용자가 값을 입력하거나 코드 호출을 통해 값을 채울 때까지 컨트롤은 유효하지 않은 상태로 유지됩니다. . 예를 들어 빈 텍스트 입력 상자는 텍스트를 입력하지 않으면 필수 확인에 실패합니다. 입력 값이 비어 있으면 valueMissing이 true를 반환합니다.
2. typeMismatch
목적: 컨트롤 값이 예상 유형(예: numbe, email, URL 등)과 일치하는지 확인합니다.
용도: 유형 속성 값을 지정합니다. 양식 컨트롤의.
예:

<input type="email" name="myEmail">

상세 설명: 특수한 양식 컨트롤 유형은 휴대폰 키보드를 사용자 정의하는 데만 사용되는 것이 아닙니다. 브라우저가 양식 컨트롤의 입력이 해당 규정을 준수하지 않는다는 것을 인식할 수 있는 경우. 이메일 주소에 @ 기호가 없거나 숫자 유형 컨트롤의 입력 값이 유효한 숫자가 아닌 등의 유형 규칙이 있으면 브라우저는 유형 불일치를 나타내기 위해 컨트롤을 표시합니다. 오류 조건에 관계없이 typeMismatch는 true를 반환합니다.
3. 패턴 불일치
목적: 양식 컨트롤에 설정된 형식 규칙에 따라 입력이 유효한 형식인지 확인합니다.
사용법: 양식 컨트롤에 패턴 속성을 설정하고 적절한 일치 규칙을 할당합니다.
예:

<input type="text" name="creditcardnumber" pattern="[0-9]{16}" title="A credit
card number is 16 digits with no spaces or dashes">

세부 정보: 패턴 속성은 개발자에게 양식 제어 값에 대한 정규식 유효성 검사 메커니즘을 설정하는 강력하고 유연한 방법을 제공합니다. 컨트롤에 대해 패턴 속성이 설정된 경우, 입력 컨트롤의 값이 패턴 규칙을 준수하지 않는 한, PatternMismatch는 참값을 반환합니다. 사용자 안내 및 기술 참조 관점에서 규칙의 역할을 설명하려면 패턴 속성이 포함된 양식 컨트롤에 제목 속성을 설정해야 합니다.
4.tooLong
목적: 입력값에 문자가 너무 많이 포함되는 것을 방지합니다.
사용법: 양식 컨트롤에 maxLength 속성을 설정합니다.
예:

<input type="text" name="limitedText" maxLength="140">

상세: 입력값의 길이가 maxLength를 초과하는 경우 tooLong 기능이 true를 반환합니다. 양식 컨트롤은 일반적으로 사용자 입력의 최대 길이를 제한하지만 프로그래밍 방식으로 설정하는 등 최대 길이를 초과할 수 있는 경우가 있습니다.
5. rangeUnderflow
목적: 숫자 컨트롤의 최소값을 제한합니다.
사용법: 양식 컨트롤의 min 속성을 설정하고 허용되는 최소값을 지정합니다.
예:

<input type="range" name="ageCheck" min="18">

상세 설명: 수치 범위 확인이 필요한 폼 컨트롤에서 값이 일시적으로 설정된 하한보다 낮을 가능성이 높습니다. 이때 ValidityState의 rangeUnderflow 속성은 true를 반환합니다.
6. rangeOverflow
목적: 수치 제어의 최대값을 제한합니다.
사용법: 양식 컨트롤의 max 속성을 설정하고 허용되는 최대값을 지정합니다.
예:

<input type="range" name="kidAgeCheck" max="12">

详细说明：与rangeUnderflow类似，如果一个表单控件的值比max更大，特性将返回true。
7、stepMismatch
目的：确保输入值符合min、max及step即设置。
用法：为表单控件设置step特性，指定数值的增量。
示例：

<input type="range" name="confidenceLevel" min="0" max="100" step="5">

详细说明：此约束条件用来保证数值符合min、max和step的要求。换句话说，当前值必须是最小值与step特性值的倍数之和。例如，范围从0到100，step特性值为5，此时就不允许出现17，否则stepMismatch返回true值。
8、customError
目的：处理应用代码明确设置及计算产生的错误。
用法：调用setCustomValidity(message)将表单控件置于customError状态。
示例：

passwordConfirmationField.setCustomValidity("Password values do not match.");

详细说明：浏览器内置的验证机制不适用时，需要显示自定义验证错误信息。当输入值不符合语义规则时，应用程序代码应设置这些自定义验证消息。
自定义验证消息的典型用例是验证控件中的值是否一致。例如，密码和密码确认两个输人框的值不匹配。只要定制了验证消息，控件就会处于无效状态，并且customError返回true。要清除错误，只需在控件上调用setCustomValidity("")即可。

以上就是详解HTML5中表单验证的8种方法介绍 的内容，更多相关内容请关注PHP中文网（www.php.cn）！