html5의 양식 유효성 검사 방법은 무엇입니까?

양식 확인 방법: 1. 양식 컨트롤에서 필수 속성을 true로 설정합니다. 2. 양식 컨트롤에 패턴 속성을 설정하고 적절한 일치 규칙을 할당합니다. 3. 양식 컨트롤에 maxLength 속성을 설정합니다. form 컨트롤은 min 및 max 속성을 설정하고 허용되는 최소 및 최대 값을 할당합니다.

이 튜토리얼의 운영 환경: Windows 7 시스템, HTML5 버전, Dell G3 컴퓨터.

오늘은 HTML5 양식 유효성 검사에 대해 이야기해 보겠습니다. 양식 유효성 검사에 대해 알아보기 전에 먼저 양식 유효성 검사가 실제로 무엇을 의미하는지 생각해 보겠습니다. 기본적으로 양식 유효성 검사는 유효하지 않은 제어 데이터를 감지하고 최종 사용자에게 이러한 오류를 표시하는 시스템입니다. 즉, 양식 유효성 검사는 양식이 서버에 제출되기 전에 양식에 대해 일련의 검사를 수행하고 사용자에게 오류를 수정하도록 알립니다.

그러나 양식 유효성 검사란 실제로 무엇입니까?

는 최적화입니다.

양식 유효성 검사가 최적화인 이유는 양식 유효성 검사 메커니즘만으로는 서버에 제출된 양식 데이터가 정확하고 유효한지 확인하기에 충분하지 않기 때문입니다. 반면에 양식 유효성 검사는 웹 응용 프로그램에서 오류가 더 빨리 발생하도록 설계되었습니다. 즉, 브라우저에 내장된 처리 메커니즘을 사용하여 웹 페이지에 잘못된 양식 컨트롤 값이 포함되어 있음을 사용자에게 알리는 것이 가장 좋습니다. 과거에는 서버가 사용자에게 잘못된 데이터를 입력했음을 알리기 위해 네트워크를 통해 데이터가 이동했습니다. 브라우저가 클라이언트를 떠나기 전에 오류를 포착할 수 있는 능력이 충분하다면 이를 활용해야 합니다.

그러나 브라우저의 양식 확인만으로는 모든 오류를 처리하기에 충분하지 않습니다.

그런데 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

목적: 컨트롤 값이 예상 유형(예: 숫자, 이메일, URL 등)과 일치하는지 확인합니다.

사용법: 양식 컨트롤의 유형 속성 값을 지정합니다.

예:

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

자세한 설명: 특수 양식 컨트롤 유형은 휴대폰 키보드를 사용자 정의하는 데만 사용되는 것이 아닙니다. 브라우저가 양식 컨트롤의 입력이 해당 유형 규칙을 따르지 않는다는 것을 인식할 수 있는 경우. 이메일 주소의 @ 기호 또는 숫자 유형 컨트롤의 입력 값이 유효한 숫자가 아닌 경우 브라우저는 유형 불일치를 나타내도록 컨트롤을 표시합니다. 오류 조건에 관계없이 typeMismatch는 true를 반환합니다.

3.patternMismatch

목적: 양식 컨트롤에 설정된 형식 규칙에 따라 입력이 유효한 형식인지 확인합니다.

사용법: 양식 컨트롤에 패턴 속성을 설정하고 적절한 일치 규칙을 할당합니다.

예:

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

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

4.toLong

목적: 너무 많은 문자가 포함된 입력 값을 방지합니다.

사용법: 양식 컨트롤에서 maxLength 속성을 설정합니다.

예:

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

세부 정보: 입력 값의 길이가 maxLength를 초과하면 tooLong 기능이 true를 반환합니다. 양식 컨트롤은 일반적으로 사용자 입력의 최대 길이를 제한하지만 프로그래밍 방식으로 설정하는 등 최대 길이를 초과할 수 있는 경우가 있습니다.

5.레인지언더플로우

目的：限制数值型控件的最小值。

用法：为表单控件设置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("")即可。

相关推荐：《html视频教程》

위 내용은 html5의 양식 유효성 검사 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!