JavaScript 없이 양식 입력 유효성 검사

나는 그것을 약속했고 여기 있습니다.

보다!

빠른 설명

여기에는 2가지가 필요합니다.

pattern html 속성

:valid 및 :invalid과 같은 일부 CSS 의사

무늬

패턴 속성을 사용하면 입력된 값이 유효한 것으로 간주되기 위해 일치해야 하는 정규식을 지정할 수 있습니다.

!important: 브라우저가 RFC5322에 따라 입력의 유효성을 검사하고 결과적으로 자체적으로 <input type="email"> 또는 :valid로 캐스트하므로 :invalid와 같이 기본적으로 유효성 검사가 있는 필드에 패턴 속성을 사용하지 않아야 합니다. .

:유효, :무효

입력에 사용될 때 CSS는 패턴 속성에 설정된 정규식이 사용자 입력과 일치할 때 유효한 것으로 간주합니다. 그렇지 않으면 유효하지 않은 것으로 간주됩니다.

기본 사용법

html

<form>
  <label for="choose">Would you prefer tea or coffee?</label>
  <input id="choose" name="i_like" required pattern="[Tt]ea|[Cc]offee">
  <button>Submit</button>
</form>

css

input:valid { color: green }
input:invalid { color: red }

이 예에서는 패턴 정규식[Tt]ea|[Cc]offee 때문에 다음 4개 단어만 유효합니다.

차

홍차

커피

커피

이 중 하나를 입력하면 색상이 "녹색"으로 변경되는 반면, 다른 것을 입력하면 "빨간색"이 되고 양식을 제출하려고 하면 브라우저 메시지가 표시됩니다.

종결

양식의 입력이 유효하지 않은 상태에서 제출하려고 하면(그래서 코드펜에 해당 버튼을 남겨둔 것입니다), 귀하의 언어로 메시지가 표시됩니다. i18n이나 다른 것이 필요하지 않으면 브라우저가 이를 처리합니다.

저는 이것이 UX에 대한 좋은 접근 방식이라고 생각합니다. 사용자에게 빠른 피드백을 제공해야 할 때마다.

다음과 같은 다른 CSS 의사를 추가하여 자신의 방식으로 디자인하고 창의성을 확장할 수 있습니다.

:focus

:placeholder-shown

:in-range

:not

마지막으로 인접한 형제 선택기+를 사용하여 레이블이나 다른 요소를 편집할 수도 있습니다. 이것이 첫 번째 코드펜에서 입력 후 레이블을 설정한 이유입니다. CSS를 확인하세요! 😁

또한 필요할 때마다 참조할 수 있도록 다음을 북마크하십시오.

초보자가 아닌 초보자를 위한 완전한 CSS 가이드

JoelBonetR ・ 2020년 6월 23일 ・ 30분 읽기

다음편까지!