HTML 양식 입력 검증을 위한 팁

양식 유효성 검사는 사용자 경험을 개선하기 위해 프론트엔드에서 매일 수행해야 하는 작업입니다.

html을 사용하여 데이터의 유효성을 검사하는 몇 가지 간단한 방법을 설명합니다.

입력 속성

HTML은 데이터 유효성 검사에 도움이 될 수 있는 몇 가지 속성을 제공합니다. 그 중 몇 가지를 살펴보겠습니다.

1. 패턴: 양식이 제출될 때 입력 값의 유효성을 검사해야 하는 정규식을 지정합니다. 이것은 text , date , tel , email , password 등을 포함한 다양한 입력 유형과 함께 사용할 수 있습니다.

2. 제목: 데이터를 검증하는 데 사용되지 않지만 데이터를 제공해야 하는 형식에 대한 자세한 정보를 제공하기 위해 사용됩니다.

3. 필수: 양식을 제출할 때 입력 필드가 비어 있지 않도록 합니다.

4. Minlength: 단순히 입력 필드에 제공되는 데이터의 최소 길이를 설정합니다. 아래의 예를 참조하십시오.

  <input type="text" minlength="4" required>

이러한 속성을 여러 입력 유형과 결합하여 올바른 데이터가 제공되도록 할 수 있습니다.

입력 유형

올바른 입력 유형을 사용하면 잘못된 데이터 유형에 대해 유효성을 검사하는 데 도움이 될 수 있습니다. 다음은 양식을 확인하는 데 필요할 수 있는 입력 유형입니다.

1. 이메일: 사용자 이메일을 수집하기 위해 email 입력 유형을 사용하면 양식이 제출될 때 데이터가 올바른 형식인지 확인합니다.

2. 비밀번호: 비밀번호 필드의 유효성을 검사할 뿐만 아니라 입력된 문자도 마스킹합니다. 비밀번호의 강도는 입력 필드의 pattern 속성에 정규식을 전달하여 지정할 수 있습니다.

  <input type="password" pattern="(?=.*[a-z]).{6}" title="Must be 6 characters or more and 
contain at least 1 lower case letter">

위는 패턴 속성에 제공된 정규식에 대해 유효성을 검사하는 암호 입력 필드의 간단한 예입니다. 제목 속성은 제공된 암호가 정규식 유효성 검사에 실패할 때 표시될 텍스트를 전달합니다.

3. 전화: 기본적으로 전화번호를 입력하는 필드를 정의합니다. 주로 모바일 기기에서 키보드를 최적화하는 데 사용됩니다. 이것을 패턴 속성과 결합하면 전화 입력 필드의 데이터를 검증하는 데 도움이 될 수 있습니다. 아래 예를 살펴보십시오.

  <input type="tel" pattern="[\+]\d{2}[\(]\d{2}[\)]\d{4}[\-]\d{4}" title="Phone Number format is +99(99)9999-9999">

4. 숫자: 숫자 값만 허용하는 입력 필드를 정의합니다. 허용되는 숫자 범위에 대한 제한을 설정할 수 있습니다.

  <input type="number" min="2" max="8">

위의 예는 2에서 8 사이의 숫자만 허용하는 숫자 입력 필드를 보여줍니다.

아래는 위에서 언급한 것들 중 일부를 잘 활용한 것입니다.

  <form id="form" autocomplete>
    <input type="text" minlength="4" required>
    <input type="email" required>
    <input type="tel" pattern="[\+]\d{2}[\(]\d{2}[\)]\d{4}[\-]\d{4}" 
     title="Phone Number format is +99(99)9999-9999" required>
    <input type="password" pattern="(?=.*[a-z]).{6}" 
     title="Must be 6 characters or more and 
     contain at least 1 lower case letter" required>
  </form>

추신 : 사용자가 액세스할 수 없는 서버 측에서 데이터 유효성 검사를 수행해야 합니다. 이렇게 하면 사용자가 서버에서 작업 중인 데이터 또는 데이터 유형을 변조하지 않습니다. 또한 클라이언트 측 테스트를 수행하려는 상황에서 novalidate 속성을 <form> 요소에 추가할 수 있습니다.

HTML은 최근 몇 년 동안 더욱 강력해졌으며 HTML로 할 수 있는 일이 흥미롭습니다. 나는 그것에 대해 많이 쓸 것입니다. 이 글이 마음에 드셨다면 ❤️ 여기저기서 저를 팔로우 해주세요.