H5 양식 검증 방법은 무엇입니까?-H5 튜토리얼-php.cn

이번에는 H5 양식 확인 방법과 H5 양식 확인 시 주의사항에 대해 알려드리겠습니다.

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

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

는 최적화입니다.

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

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

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

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

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

예:

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

로그인 후 복사

详细说明：pattern特性向开发人员提供了一种强大而灵活的方式来为表单的控件值设定正则表达式验证机制。当为控件设置了pattern特性后，只要输入控件的值不符合模式规则，patternMismatch就会返回true值。从引导用户和技术参考两方面考虑，你应该在包含pattern特性的表单控件中设置title特性以说明规则的作用。

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("")即可。

相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！