HTML5 제약 조건 검증 소개

대화 형 웹 사이트 및 응용 프로그램은 양식을 사용하지 않으면 상상할 수 없습니다. 사용자와 연결, ~까지 데이터를 얻다. 우리는 그들과 원활한 거래를 보장하기 위해 필요합니다. 우리는 필요가있다. 유효한 사용자 입력, 그러나 우리는 그것을 얻는 방법이 필요합니다. 좌절하지 않는다. 사용자가 너무 많음.

현명하게 선택한 UX 디자인 패턴을 사용하여 양식의 유용성을 향상시킬 수 있지만 HTML5는 제약 조건 유효성 확인을위한 기본 메커니즘을 갖추고 있으므로 프론트 엔드에서 바로 입력 오류를 잡아라..

이 게시물에서 우리는 브라우저 제공 제약 조건 유효성 검사, 프론트 엔드 개발자가 HTML5를 사용하여 유효한 사용자 입력 보안.

프런트 엔드 입력 검증이 필요한 이유

입력 유효성 검사 두 가지 주요 목표가 있습니다. 우리가 얻는 내용은 다음과 같아야합니다.

1. 유용한

우리는 필요하다. 우리가 함께 작업 할 수있는 유용한 데이터. 우리는 사람들이 올바른 형식의 사실적인 데이터. 예를 들어, 오늘날 살아있는 사람은 200 년 전에 태어났습니다. 이런 식으로 데이터를 얻는 것은 처음 엔 재미있을 것 같지만 장기적으로는 성가시다. 우리 데이터베이스에 쓸모없는 데이터를 채워 넣는다..

2. 보안

보안을 언급 할 때 이것은 우리가 악성 콘텐츠 삽입 방지 - 고의 또는 사고에 관계없이.

유용성 (합리적인 데이터를 얻음)을 달성 할 수 있습니다. 클라이언트 측에서만, 백엔드 팀은이 일을 너무 많이 할 수 없습니다. 달성하려면 보안, 프런트 엔드와 백엔드 개발자가 함께 작업해야합니다..

프론트 엔드 개발자가 클라이언트 측에서 입력의 유효성을 적절하게 확인하면 백엔드 팀은 훨씬 적은 취약점을 처리해야합니다.. 해킹 (사이트)은 흔히 수반합니다. 추가 데이터 제출, 또는 잘못된 형식의 데이터. 개발자는 이와 같은 보안 취약점을 해결할 수 있으며 프런트 엔드와 성공적으로 경쟁 할 수 있습니다..

예를 들어,이 PHP 보안 가이드는 클라이언트 쪽에서 가능한 모든 것을 검사 할 것을 권장합니다. 이들은 다음과 같은 많은 예제를 제공하여 프론트 엔드 입력 유효성 검사의 중요성을 강조합니다.

"입력 유효성 검사는 매우 제한된 값, 예를 들어 정수, 영숫자 문자열 또는 HTTP URL이어야하는 경우에 가장 효과적입니다."

프론트 엔드 입력 검증에서 우리의 임무는 다음과 같습니다. 합리적인 제약을 부과하다 사용자 입력. HTML5의 제약 조건 유효성 검사 기능을 사용하면.

HTML5 제약 조건 유효성 검사

HTML5 이전에는 프론트 엔드 개발자가 자바 스크립트로 사용자 입력 유효성 검사, 지루하고 오류가 발생하기 쉬운 프로세스였습니다. 클라이언트 측 양식 유효성 검사를 개선하기 위해 HTML5는 제약 조건 검증 최신 브라우저에서 실행되는 알고리즘 제출 된 입력의 유효성을 검사합니다..

평가를 위해 알고리즘은 입력 요소의 검증 관련 속성, 와 같은 , </code>, 과 <code><select></code>. 제약 조건 유효성 검사가 브라우저에서 단계별로 어떻게 발생하는지 알고 싶다면 WhatWG 문서를 확인하십시오..</p> <p>HTML5의 제약 조건 유효성 검사 기능 덕분에 <strong>표준 입력 유효성 검사 작업</strong> 클라이언트 쪽 <strong>JavaScript없이, HTML5에서만</strong>.</p> <p>보다 복잡한 유효성 검사 관련 작업을 수행하기 위해 HTML5는 <strong>제약 조건 유효성 검사 JavaScript API</strong> 사용자 정의 유효성 검사 스크립트를 설정하는 데 사용할 수 있습니다..</p> <h4>시맨틱 입력 형식으로 유효성 검사</h4> <p>HTML5가 도입되었습니다. <strong>의미 론적 입력 유형</strong> 사용자 에이전트를위한 요소의 의미를 나타내는 것 말고도 - <strong>사용자 입력의 유효성을 검사하다.</strong> 사용자를 특정 입력 형식으로 제한함으로써.</p> <p>HTML5 이전에 이미 존재하는 입력 유형 (<code>본문</code>, <code>암호</code>, <code>제출하다</code>, <code>다시 놓기</code>, <code>라디오</code>, <code>확인란</code>, <code>단추</code>, <code>숨겨진</code>), 우리는 또한 다음을 사용할 수있다. <strong>의미 론적 HTML5 입력 유형</strong>: <code>이메일</code>,<code>전화</code>,<code>url</code>,<code>번호</code>,<code>시각</code>,<code>날짜</code>,<code>날짜 시간</code>,<code>datetime-local</code>, <code>달</code>,<code>주</code>, <code>범위</code>, <code>수색</code>,<code>색깔</code>.</p> <p>이전 브라우저에서는 HTML5 입력 유형을 안전하게 사용할 수 있습니다. <code><input type="text"></code> 지원하지 않는 브라우저의 필드.</p> <p>사용자가 잘못된 입력 유형을 입력했을 때 어떤 일이 발생하는지 봅시다. 다음 코드를 사용하여 전자 메일 입력 필드를 만들었습니다.</p> <pre name="code"> <form name="form" action="#" method="post"> <label for="youremail">귀하의 이메일:</label> <input type="email" name="email"> <input type="submit" value="Submit"> </form> </pre> <p>사용자가 전자 메일 형식을 사용하지 않는 문자열을 입력하면 제약 조건 유효성 검사 알고리즘 <strong>양식을 제출하지 않습니다.</strong>, 과 <strong>오류 메시지를 반환합니다.</strong>:</p> <figure> <img src="//savtec.org/img/images_1/intro-into-html5-constraint-validation.jpg"></figure><p>동일한 규칙이 다른 입력 유형에도 적용됩니다 (예 : <code>type = "url"</code> 사용자는 URL 형식을 따르는 입력 만 제출할 수 있습니다 (예 : <code>http : //</code> 또는 <code>ftp : //</code>).</p> <p>일부 입력 유형은 <strong>사용자가 잘못된 입력 형식을 입력하는 것을 허용하지 않습니다.</strong>, 예를 들면 <code>색깔</code> 과 <code>범위</code>.</p> <pre name="code"> <form name="form" action="#" method="post"> <label for="bgcol">배경색:</label> <input type="color" name="color"> <input type="submit" value="Submit"> </form> </pre> <p>우리가 <code>색깔</code> 입력 유형의 경우 사용자는 색상 선택기에서 색상을 선택하거나 기본 검정색을 유지하도록 제한됩니다. 입력 필드는 <strong>디자인에 제약을받는</strong>, 따라서 사용자 오류가 발생할 가능성은 거의 없습니다..</p> <figure> <img src="//savtec.org/img/images_1/intro-into-html5-constraint-validation_2.jpg"></figure><p>적절한 경우에는 다음을 고려해 볼 가치가 있습니다. <code><select></code> 이러한 제약에 의한 입력 유형과 유사하게 작동하는 HTML 태그. 사용자는 드롭 다운 목록에서 선택할 수 있습니다..</p> <pre name="code"> <form name="form" action="#" method="post"> <label for="favfruit">당신이 가장 좋아하는 과일 :</label> <select name="fruit"> <option value="apple">사과</option> <option value="pear">배</option> <option value="orange">주황색</option> <option value="raspberry">산딸기</option> </select> <input type="submit" value="Submit"> </form> </pre> <figure> <img src="//savtec.org/img/images_1/intro-into-html5-constraint-validation_3.jpg"></figure><h4>HTML5의 유효성 검사 속성 사용</h4> <p>의미 론적 입력 유형을 사용하면 사용자가 제출할 수있는 것에 대한 제약이 설정되지만, 많은 경우에 좀 더 나아가고 싶습니다. 이것은 <strong>유효성 검사 관련 속성</strong> ~의 <code><input></code> 태그가 우리를 도울 수 있습니다..</p> <p>유효성 검사 관련 속성은 특정 입력 유형에 속합니다 ( <em>모든</em> 유형)에 제약 조건을 부과한다.</p> <h5>1. <code>필수</code> 반드시 유효한 입력을 얻기 위해서</h5> <p>그만큼 <code>필수</code> 속성은 가장 잘 알려진 HTML 유효성 검사 속성입니다. 그것은 <strong>부울 속성</strong> 그것은 그것을 의미한다. <strong>가치가 없다.</strong>, 우리는 단지 내부에 배치해야합니다. <code><input></code> 태그를 사용하려면 :</p> <pre name="code"> <input type="email" name="email" required> </pre> <p>사용자가 필수 입력 필드에 값을 입력하는 것을 잊어 버린 경우 브라우저 <strong>오류 메시지를 반환합니다.</strong> 그 (것)들은 분야에서 채우기 위하여 경고하고, <strong>양식을 제출할 수 없습니다.</strong> 그들이 유효한 입력을 제공 할 때까지 그것이 항상 중요한 것은 <strong>시각적으로 표시하다</strong> 사용자에게 필수 입력란.</p> <p>그만큼 <code>필수</code> 속성은 <strong>다음 입력 유형과 함께 사용됩니다.</strong>: <code>본문</code>, <code>수색</code>, <code>url</code>, <code>전화</code>, <code>이메일</code>, <code>암호</code>, <code>날짜</code>, <code>날짜 시간</code>, <code>datetime-local</code>, <code>달</code>, <code>주</code>,<code>시각</code>, <code>번호</code>, <code>확인란</code>, <code>라디오</code>, <code>파일</code>, 더하기 <code><textarea></code>과 <code><select></code> HTML 태그.</p> <h5>2. <code>최소</code>, <code>최대</code> 과 <code>단계</code> 번호 검증을위한</h5> <p>그만큼 <code>최소</code>, <code>최대</code> 과 <code>단계</code> 속성을 사용하면 <strong>숫자 입력 필드에 제약 조건 넣기</strong>. 그들은 함께 사용할 수 있습니다. <code>범위</code>, <code>번호</code>, <code>날짜</code>, <code>달</code>, <code>주</code>, <code>날짜 시간</code>, <code>datetime-local</code>, 과 <code>시각</code> 입력 유형.</p> <p>그만큼 <code>최소</code> 과 <code>최대</code> 속성은 쉽게 사용할 수있는 좋은 방법입니다. <strong>불합리한 데이터 제외</strong>. 예를 들어 아래의 예는 사용자가 18 세에서 120 세 사이의 연령을 제출하도록합니다.</p> <pre name="code"> <form name="form" action="#" method="post"> <label for="yourage">나이 :</label> <input type="number" name="age" min="18" max="120"> <input type="submit" value="Submit"> </form> </pre> <p>제약 조건 검증 알고리즘이 사용자 입력보다 작을 때 <code>최소</code>, 또는 <code>최대</code> 값을 사용하여 백엔드에 도달하지 못하게하고 오류 메시지를 반환합니다..</p> <figure> <img src="//savtec.org/img/images_1/intro-into-html5-constraint-validation_4.jpg"></figure><p>그만큼 <code>단계</code> 속성 <strong>숫자 간격을 지정합니다.</strong> 숫자 입력 필드의 유효한 값 사이. 예를 들어, 사용자가 윤년에서만 선택할 수 있도록하려면 <code>step = "4"</code> 속성을 필드에 추가하십시오. 아래 예제에서 나는 <code>번호</code> 입력 유형 <code>유형 = "연도"</code> HTML5에서.</p> <pre name="code"> <form name="form" action="#" method="post"> <label for="yourleapyear">당신의 가장 좋아하는 윤년 :</label> <input type="number" name="leapyear" min="1972" max="2016" step="4"> <input type="submit" value="Submit"> </form> </pre> <p>사전 설정된 제약 조건을 사용하여 사용자는 1972 년에서 2016 년 사이의 윤년에서 선택할 수 있습니다. <code>번호</code> 입력 유형. 입력 필드에 수동으로 값을 입력 할 수도 있지만 제약 조건을 충족시키지 못할 경우 브라우저에서 오류 메시지를 반환합니다.</p> <figure> <img src="//savtec.org/img/images_1/intro-into-html5-constraint-validation.gif"></figure><h5>삼. <code>최대 길이</code> 텍스트 길이 유효성 검사</h5> <p>그만큼 <code>최대 길이</code> 속성을 사용하면 <strong>최대 문자 길이를 설정하십시오.</strong> 텍스트 입력 필드의 경우. 그것과 함께 사용할 수 있습니다. <code>본문</code>, <code>수색</code>, <code>url</code>, <code>전화</code>, <code>이메일</code> 과 <code>암호</code> 입력 유형 및 <code><textarea></code> HTML 태그.</p> <p>그만큼 <code>최대 길이</code> 속성은 특정 수 이상의 문자를 가질 수없는 전화 번호 필드 나 사용자가 특정 길이 이상을 쓰지 못하도록하는 연락처 양식을위한 훌륭한 솔루션이 될 수 있습니다.</p> <p>아래의 코드 스 니펫은 후자에 대한 예를 보여 주며 사용자 메시지를 500 자로 제한합니다. </p> <pre name="code"> <form name="form" action="#" method="post"> <label for="yourmsg">메시지 (최대 500 자) :</label> <textarea name="msg" cols="25" rows="4" maxlength="500">

그만큼 최대 길이 속성 오류 메시지를 반환하지 않습니다., 그러나 브라우저는 단순히 사용자가 지정된 문자 번호 이상을 입력하게하지 않습니다. 그것이 중요한 이유입니다. 사용자에게 제약 조건을 알린다., 그렇지 않으면 왜 타이핑을 할 수 없는지 이해하지 못합니다..

 4. 무늬 Regex 검증을위한
 그만큼 무늬 우리를 허용하는 속성 정규 표현식을 사용한다. 우리의 입력 검증 과정에서. 정규 표현식은 사전 정의 된 문자 세트 그 패턴을 형성합니다. 패턴을 따르는 문자열을 검색하거나 패턴으로 정의 된 특정 형식을 적용 할 수 있습니다.
 와 더불어 무늬 우리가 후자를 할 수있는 속성 - 사용자가 주어진 정규식과 일치한다..
  그만큼 무늬 속성에는 많은 유스 케이스가 있지만, 우리가 원할 때 특히 유용 할 수 있습니다. 암호 필드의 유효성을 검사하다..
 아래 예제에서는 사용자가 최소 8 자의 암호를 입력해야하며 적어도 하나의 문자와 하나의 숫자 (내가 사용한 정규식의 소스)를 포함합니다.. 
   * 너의 비밀번호:   
 
 몇 가지 더
 이 기사에서 우리는 어떻게 브라우저 제공 양식 유효성 검사 HTML5의 네이티브 제약 검증 알고리즘에 의해 제공됩니다. 맞춤형 유효성 검사 스크립트를 만들려면 양식 유효성 검사 기술을 개선하는 다음 단계 인 제약 조건 유효성 검사 API를 사용해야합니다..
 HTML5 양식은 보조 기술을 통해 액세스 할 수 있으므로 반드시 HTML5 형식을 사용할 필요는 없습니다. 아리아가 요구하는 화면 판독기에 필수 입력 필드를 표시하는 ARIA 속성 그러나 구형 브라우저에 대한 접근성 지원을 추가하는 것은 여전히 유용 할 수 있습니다. 또한 제약 조건 유효성 체크 해제 추가하여 노비탈산 부울 속성을 
 요소.