개발자 로드맵

https://roadmap.sh/

Developer Roadmaps - roadmap.sh

 

 

 

form validations

 

 

폼 유효성 검사는 특정 요구 사항을 충족해야 하는 사용자의 입력을 필요로 할 때 유용합니다. 서버 측 유효성 검사와 클라이언트 측 유효성 검사라는 두 가지 표준이 있습니다. 각 표준에 대해 정확한 폼 유효성을 달성하는 여러 가지 방법이 있습니다.

서버 측 유효성 검사는 입력이 서버로 전송된 후에 웹 서버에서 수행됩니다.

클라이언트 측 유효성 검사는 입력이 웹 서버로 전송되기 전에 웹 브라우저에서 수행됩니다.

서버 측 유효성 검사
만약 클라이언트 측과 서버 측 유효성 검사 중에서 선택해야 한다면, 서버 측 유효성 검사를 선택하세요. 클라이언트 측만 유효성을 검사하면 전문가 수준의 사용자나 해커가 데이터를 서버에 제출하기 전에 데이터를 변경할 수 있습니다. 잘못된 데이터는 서버를 손상시킬 수 있거나 정보를 훔칠 수 있으며, 때로는 전체 데이터베이스를 삭제할 수도 있습니다.

클라이언트 측 유효성 검사에서는 서버의 리소스가 필요한 경우 (예: 데이터베이스에 저장된 유효한 값 목록과 비교할 수 있는 경우) 이를 처리할 수 없습니다.

클라이언트 측 유효성 검사
클라이언트 측 유효성 검사는 서버 부하를 줄이고 사용자가 양식을 작성하는 동안 즉각적인 피드백을 제공하는 데 도움이 될 수 있습니다. 두 가지 주요한 클라이언트 측 유효성 검사 방법이 있습니다.

HTML5 유효성 검사 - 권장
HTML5에는 작업을 간소화하는 속성으로 내장된 양식 유효성 검사가 있습니다. 이러한 유효성 검사가 네이티브로 지원되므로 프레임워크에서 제공하는 JavaScript 유효성 검사 라이브러리보다는 가능한 한 사용하는 것이 좋습니다. HTML5 유효성 검사는 강력하지만 두 이메일 필드가 일치하는지와 같은 복잡한 유효성 검사를 구현하기 어려울 수 있습니다.

예를 들어, 이름 입력 필드를 필수 필드로 만들려면 input 요소에 required 속성을 사용하면 됩니다. 이제 다음과 같이 보일 것입니다. <input id="name" name="name" type="text" required="">. 이게 전부입니다!

HTML5 유효성 검사 및 양식 요소에 대한 자세한 내용은 MDN Forms in HTML 문서를 참조하십시오. 주요 단점 중 하나는 경고 프롬프트의 텍스트와 형식에 대한 유연성이 떨어진다는 것입니다. 이는 HTML5에서 제공하는 제약 유효성 API를 사용하여 해결할 수 있습니다.

JavaScript 방법
HTML5 유효성 검사가 우선이지만 프레임워크에서 제공하는 JavaScript 유효성 검사를 사용하여 더 복잡한 유효성 검사 패턴을 구현할 수 있습니다.

이메일과 확인 이메일 필드가 동일한지 확인하려면 이메일 필드에 class="validate-email"을 사용하고 해당 필드를 참조하기 위해 id="email"을 사용하십시오. 이것은 다음과 같이 보일 것입니다. <input class="validate-email" id="email" name="email" type="text">.

비교를 수행하려면 다음 jQuery를 포함하십시오.