vue에서 더 행복한 html5 양식 검증

input:invalid {} CSS 스타일은 양식 요소가 유효하지 않을 때 유용하지만 사용자 경험은 직접 사용하면 좋지 않습니다. 예를 들어, 폼이로드되어 사용자를 혼란스럽게 할 때 잘못된 스타일이 즉시 표시됩니다. 따라서이 사용법은 실제 응용 분야에서는 드 rare니다. 그러나이 문제를 피하면 :invalid 선택기는 대규모 라이브러리에 의존하지 않고 양식 검증에 큰 역할을 할 수 있습니다.

Dave는 2017 년의 원래 아이디어를 바탕으로 개선을 제안했습니다.

 <code>form.errors :invalid { outline: 2px solid red; }</code>

기본 오류 스타일은 양식이 오류 상태에 있고 errors 클래스가 추가 된 것을 확인한 후에 만 ​​적용됩니다. 테스트도 쉽습니다. 예를 들어 제출 버튼을 클릭하면이 클래스를 적용 할 수 있습니다.

 <code>submitButton.addEventListener("click", (e) => { form.classList.toggle("errors", !form.checkValidity()) });</code>

입력 상자가 초점을 잃을 때 또는 다른 시간에 적용 할 수 있습니다. 각 입력 상자를 래퍼에 래핑하고 적절한 경우 래퍼 클래스를 전환 할 수도 있습니다.

Dave는이 아이디어를 vue에 적용합니다.

사용자가 양식을 제출하기 전에 잘못된 스타일을 표시하기를 원하지 않기 때문에 양식 구성 요소를 초기화 할 때 errors false 로 설정합니다. invalidateForm 함수는 this.error true 로 설정합니다. 이것은 CSS :invalid 의사 클래스, 너무 시급합니다. invalid 이벤트를 들으면 첫 번째 양식 제출 시도가 끝날 때까지 스타일의 적용을 지연시킬 수 있습니다.

이 접근법에는 추가 라이브러리가 필요하지 않으므로 HTML 양식 검증의 기본 기능을 최대한 활용합니다. 다음 링크는 오류 메시지를 표시하는 개선 된 버전입니다.

직접 링크 →

위 내용은 vue에서 더 행복한 html5 양식 검증의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!