Validation Framework 쿡북에서 무료 🌽

한 가지 속성은 양식 유효성 검사 프레임워크를 완전히 중복되게 만듭니다. <form novalidate>는 쇼의 주인공이지만 생각대로 작동하지 않습니다!

그러나 먼저 html 5에 유효성 검사 속성이 너무 많으면 사용자 지정 유효성 검사가 필요한 이유는 무엇입니까? 나는 그것이 2 배라고 생각합니다. 브라우저 기본 유효성 검사 메시지의 스타일을 지정할 수 없거나 사용자가 html 5 이전 브라우저를 지원해야 합니다(이 시점에서 이 질문은 프론트엔드 개발자에게 순전히 잔인함).
novalidate는 기본 브라우저 동작, 특히 유효성 검사 메시지를 방지한다는 점에서 preventDefault()와 유사합니다. 실제로 required , min와 같은 html 5 유효성 검사 속성을 사용하는 경우 얻는 못생긴 기본 브라우저 html 5 메시지를 숨깁니다. ) , max , type , pattern 대신 아무 작업도 수행하지 않습니다...

Soo you broke my form.. how is this validation?

아직 유효성 검사 중이지만 JavaScript로 전환하고 유효성 검사를 직접 관리해야 합니다...

Kind of like a form validation framework but without any dependencies, loading, weight or new syntax?

예, 😊 HTMLFormElement 및 모든 입력에는 몇 가지 방법과 잘 알려지지 않은 트릭, 모를 수도 있는 트릭이 있으므로 쉽게 유효성 검사를 가져올 수 있습니다.

트릭 🐰🎩

이를 위해서는 다음이 필요합니다.

HTMLFormElement.checkValidity()

HTMLInputElement.checkValidity()

새로운 FormData(someFormEl);

모든 html 5 액세스 가능한 유효성 검사 속성

위에는 액세스 가능하고 JavaScript가 활성화된 단순하지만 강력한 양식을 만드는 데 필요한 모든 부분이 있습니다.

하지만 React, Vue, Angular

사람, 제출 및 변경 시 이벤트에는 모두 실제 요소 😱에 대한 target 참조가 있으므로 이전에 있었거나 앞으로도 있을 다른 JavaScript처럼 이러한 메서드를 호출할 수 있습니다. 원하는 경우 참조할 수도 있습니다.

나는 이러한 기술을 사용합니까? 예 위의 모든 항목에서 수행합니다.

제출 시 간단한 유효성 검사

그래서 다 설명하기 어렵기 때문에 React 예제를 해보자

function onSubmit(e) {
    e.preventDefault();
    const form = e.target;
    if (!form.checkValidity()) {
        // form invalid!
        ... Stuff happens
    }
}

여기에서 우리는 어떤 경우에는 괜찮을 수 있는 특정 오류를 보고할 수 있고 실제로 로그인 양식과 같은 보안 요구 사항을 보고할 수 있지만 양식의 모든 값을 확인하고 깨진 것을 찾으려면 어떻게 해야 할까요? 내 머리 꼭대기에는 몇 가지 방법이 있습니다. 배열의 모든 요소에 대한 노드 목록을 반환하기 위해 HTMLFormElement.elements를 사용할 수 있지만 DOM을 사용하고 주어진 프레임워크의 관용적 스타일에 맞지 않을 수 있습니다. ! 그래도 루프 내부에서 element[I]checkValidity()를 호출하면 문제를 해결하는 데 도움이 될 수 있습니다. 또는 다음과 같이 할 수 있습니다.

function onSubmit(e) {
    e.preventDefault();
    const form = e.target;
    if (!form.checkValidity()) {
        // form invalid!
        const data = new FormData(form);
        const formEntries = Object.fromEntries(data.entries()); 
        // Loop through and validate
        formEntries
    }
}

그게 다야 더 말할 것도 없고 프레임워크도 필요 없습니다 ♥️