양식 검증에 대한 깊은 논의 전에 양식의 형식 검증의 진정한 의미에 대해 생각해 봅시다. 핵심과 관련하여 양식 검증은 최종 사용자에 대한 잘못된 제어 데이터를 감지하고 이러한 오류를 표시하는 시스템입니다. 다시 말해, 양식 검증은 서버를 제출하기 전에 일련의 검사를 수행하고 사용자에게 오류를 수정하도록 통지하는 것입니다.
그러나 실제 양식 검증은 무엇입니까?
최적화입니다.
공식 검증이 최적화 인 이유는 양식 검증 메커니즘을 통해서만 서버에 제출 된 양식 데이터가 정확하고 효과적이지 않도록하기에 충분하지 않기 때문입니다. 반면에 디자인 양식 검증은 웹 응용 프로그램이 오류를 더 빨리 던지도록하는 것입니다. 다시 말해, 브라우저의 구축 된 처리 메커니즘을 사용하여 잘못된 양식 제어 값이 포함 된 사용자의 웹 페이지를 알리는 것이 가장 좋습니다. 과거에는 데이터가 인터넷에서 돌아 서서 서버가 사용자에게 잘못된 데이터를 입력했음을 알리도록합니다. 브라우저가 클라이언트를 떠나기 전에 완전히 캡처 할 수 있다면이 장점을 사용해야합니다.
그러나 브라우저의 양식 검사는 모든 오류를 처리하기에 충분하지 않습니다.
그러나 HTML5는 여전히 양식 제어의 데이터 정확성을 검증하기위한 8 가지 방법을 도입합니다. 순서대로 살펴 보겠습니다.
HTML5 양식 확인을 지원하는 브라우저에서 양식 제어를 통해 유효성 상태 객체에 액세스 할 수 있습니다.
var value = document.myform.myinput.validity;
이 코드 라인은 myInput이라는 유효성 상태 객체를 얻었습니다. 객체에는 8 개의 검증 상태 모두에 대한 참조와 최종 확인 결과가 포함되어 있습니다.
통화 방법은 다음과 같습니다.
valcheck.valid
실행 후 양식 제어가 모든 검증 제약 조건을 통과했는지 여부를 나타내는 부울 값을 얻게됩니다. 값 특성을 최종 검증 결과로 취급 할 수 있습니다. 8 가지 제약 조건이 모두 전달되면 값 특성이 사실입니다. 그렇지 않으면 실패하는 제약 조건이있는 한 값 로고는 모두 S입니다.
앞에서 언급했듯이 모든 형태의 요소에는 8 가지 가능한 검증 제약이 있습니다. 각 조건은 유효성 상태 객체에 해당 특성 이름을 가지며 적절한 방식으로 액세스 할 수 있습니다. 양식 컨트롤과 어떻게 관련되어 있는지, 그리고 유효성 상태 객체를 기반으로이를 확인하는 방법을 확인하기 위해 하나씩 분석하겠습니다.
1. 평가목적 : 양식 제어의 값이 채워 졌는지 확인하십시오.
사용법 : 양식 제어에서 필요한 기능을 True로 설정하십시오.
예:
<입력 유형 = 텍스트 이름 = mytext 필수>
자세한 지침 : 양식 컨트롤이 필요한 기능을 설정하면 사용자가 코드 호출에 의해 값을 채우거나 채우기 전에 컨트롤이 항상 유효하지 않습니다. 예를 들어, 빈 텍스트 입력 상자는 텍스트를 입력하지 않는 한 필요한 점검을 전달할 수 없습니다. 입력 값이 비어 있으면 ValueMissing은 true를 반환합니다.
2. TypMismatch목표 : 제어 값과 예상 유형 (예 : Numbe, 이메일, URL 등)의 일치를 보장합니다.
사용법 : 양식 제어의 유형 특성 값을 지정하십시오.
예:
<입력 유형 = 이메일 이름 = MyEmail>
자세한 지침 : 특수 양식 제어 유형은 휴대 전화 키보드를 사용자 정의하는 데 사용되지 않습니다. 브라우저가 양식 컨트롤의 입력을 식별 할 수있는 경우 규칙 유형이@와 같은 해당 유형을 충족하지 않습니다. 전자 메일 주소의 기호 또는 숫자 -유형 컨트롤의 입력 값은 유효 숫자가 아니 었으며, 브라우저는이 컨트롤을 표시하여 유형이 일치하지 않음을 나타냅니다. 어떤 오류가 있더라도 TypSimismatch가 True로 돌아갑니다.
3. Pattern -Mistatch목적 : 입력이 양식 제어에 설정된 형식 규칙에 따라 입력이 유효한지 확인하십시오.
사용법 : 양식 컨트롤에서 패턴 기능을 설정하면 웰은 적절한 일치 규칙을 제공합니다.
예:
<입력 유형 = 텍스트 이름 = CreditCardNumber 패턴 = [0-9] {16} target = '_lank'> 정규 표현식 검증 메커니즘. 입력 제어의 값이 모드 규칙을 충족하지 않는 한 패턴 기능이 제어로 설정되면 PatternMistatch는 실제 값을 반환합니다. 지침 사용자 및 기술 참조에서 규칙을 설명하기 위해 패턴 특성을 포함하는 양식 컨트롤로 제목 특성을 설정해야합니다. 4. 도구 목적 : 문자가 너무 많은 입력 값을 피하십시오.
사용법 : 양식 제어에서 최대 길이 특성을 설정하십시오.
예:
<입력 유형 = 텍스트 이름 = LimitedDtext maxlength = 140>
자세한 설명 : 입력 값의 길이가 MaxLength를 초과하면 Toolong 기능이 True를 반환합니다. 양식 제어는 일반적으로 사용자가 입력 할 때 최대 길이로 제한되지만 일부 경우 프로그램 설정과 같은 경우 여전히 최대 값을 초과합니다.
5. 범위 밑바닥 목적 : 수치 제어의 최소값을 제한하십시오.
사용법 : 양식 컨트롤의 최소 기능을 설정하고 허용 가능한 최소값을 제공하십시오.
예:
<입력 유형 = 범위 이름 = AgeCheck min = 18>
자세한 지침 : 확인 해야하는 양식 제어에서 값은 설정의 하한보다 일시적으로 낮을 수 있습니다. 이 시점에서 VALIDICTESSTATE의 범위 underFlow 기능이 True로 돌아갑니다.
6. RangeOverflow 목적 : 수치 제어의 최대 값을 제한하십시오.
사용법 : 양식 제어의 최대 특성을 설정하고 최대 값을 제공하십시오.
예:
<입력 유형 = 범위 이름 = KidageCheck Max = 12>
자세한 설명 : RangeUnderFlow와 유사하게 양식 제어의 값이 MAX보다 크면 특성이 True를 반환합니다.
7. stepmistatch 목적 : 입력 값이 최소, 최대 및 단계를 충족하는지 확인하십시오.
사용법 : 양식 제어의 단계 특성을 설정하고 값의 증가를 지정하십시오.
예:
<입력 유형 = 범위 이름 = confidenCelevel min = 0 max = 100 step = 5>
자세한 설명 :이 제약 조건은 값이 최소, 최대 및 단계의 요구 사항을 충족하는 데 사용됩니다. 다시 말해, 현재 값은 최소값의 배수 및 단계 기능 값의 합이어야합니다. 예를 들어, 0에서 100까지, 단계 기능 값은 5이며, 현재 17은 없을 것입니다. 그렇지 않으면 stepmismatch가 실제 값을 반환합니다.
8. CustomerRor 목표 : 전달 애플리케이션 코드는 명확하게 설정하고 오류를 계산합니다.
사용법 : SetCustomValidity (메시지)를 호출하여 양식 제어 부품을 CustomerRor 상태에 배치합니다.
예:
PasswordConFirmiveLiveField.SetCustOmValidity (비밀번호 값이 일치하지 않습니다.);
자세한 지침 : 브라우저의 확인 메커니즘이 적용되지 않으면 사용자 정의 확인 오류 정보를 표시해야합니다. 입력 값이 시맨틱 규칙을 충족하지 않으면 응용 프로그램 코드는 이러한 사용자 정의 확인 메시지를 설정해야합니다.
사용자 정의 된 확인 메시지의 일반적인 경우는 제어 제어의 값이 일관된 지 여부를 확인하는 것입니다. 예를 들어, 비밀번호와 암호는 두 패자의 값이 일치하지 않음을 확인합니다. 확인 메시지가 사용자 정의되는 한 컨트롤은 유효하지 않은 상태에 있으며 CustomerRor는 True를 반환합니다. 오류를 제거하려면 컨트롤에서 setCustomValidity ()를 호출하십시오.
글쎄, 위는 html5의 테이블만으로 검증 된 8 가지 기본 방법입니다. 또한 모두가 VEVB WULIN.com을 지원하기를 바랍니다.