유효성 검사 예제

세 번째 예로, 설문조사 앱에서 볼 수 있는 것을 만들었습니다. 사용자는 새로운 스타 디스트로이어 모델에 대한 기능 세트에 대해 “예산”을 지출하라는 요청을 받습니다. 합계는 100이어야 합니다. 첫째, HTML. 참고: 일부 요소 형식은 유효성을 검사할 패턴 특성이 필요하지 않습니다. 예를 들어 전자 메일 형식을 지정하면 잘 구성된 전자 메일 주소 또는 여러 특성이 있는 경우 잘 구성된 전자 메일 주소 또는 쉼표로 구분된 전자 메일 주소 목록과 일치하는 정규식에 대해 입력된 값의 유효성을 검사합니다. 추가 예로서 URL 유형이 있는 필드에는 제대로 구성된 URL이 필요합니다. HTML5는 폼 요소의 상태를 확인하고 사용자 지정하는 제약 조건 유효성 검사 API를 제공합니다. 무엇보다도 오류 메시지의 텍스트를 변경할 수 있습니다.

다음은 빠른 예입니다: 이 CSS는 입력이 유효하지 않은 경우 밝은 빨간색 파선 테두리를 가지게 하고 유효할 때 더 미묘한 검은색 테두리를 갖습니다. 아래 예제에서 새 동작을 시도해 보십시오. 이 시점에서 패턴 특성 내의 값을 앞에서 본 일부 예제와 동일하게 변경하고 입력 값을 유효하게 만들기 위해 입력할 수 있는 값에 미치는 영향을 살펴봅니다. 자신만의 글을 쓰고 어떻게 되는지 확인해 보십시오. 가능한 경우 과일과 관련된 예제를 만들어 서 예제가 이해되도록하십시오! 마지막 예제에서는 Ajax를 사용하여 서버에서 유효성을 검사하는 것을 만들었습니다. 양식에서 새 제품의 이름을 묻는 다음 이름이 고유한지 확인합니다. 우리는 유효성 검사를 수행 하기 위해 빠른 OpenWhisk 서버없는 작업을 작성했습니다. 매우 중요하지는 않지만 HTML의 기본 제공 유효성 검사 기능의 사용을 보여 줄 수 있는 전체 예제는 다음과 같습니다. 이를 설명하기 위해 레거시 브라우저에서 작동하도록 이전 예제를 다시 빌드해 보겠습니다. 자세한 내용은 아래와 같습니다. HTML5의 기능 중 하나는 스크립트에 의존하지 않고 대부분의 사용자 데이터의 유효성을 검사하는 기능입니다.

이 작업은 양식 요소에 유효성 검사 특성을 사용하여 수행됩니다. 유효성 검사 특성을 사용하면 값을 채워야 하는지 여부와 같은 양식 입력에 대한 규칙을 지정할 수 있습니다. 데이터의 최소 및 최대 길이; 데이터가 숫자, 전자 메일 주소 또는 다른 데이터여야 하는지 여부 데이터가 일치해야 하는 패턴입니다. 입력한 데이터가 지정된 모든 규칙을 따르는 경우 유효한 것으로 간주됩니다. 그렇지 않은 경우 유효하지 않은 것으로 간주됩니다. 다시 말하지만, 다른 브라우저는 이것을 다르게 구현합니다. 오페라에서 입력을 받아 들일 수 있도록 *@*만 입력하는 것으로 충분합니다. 사파리, 크롬, 파이어 폭스에서 당신은 적어도 입력해야합니다 *@-.-. 물론 두 예제 모두 매우 제한적인 것은 아니지만 전화 번호, 여러 개의 `@`s 또는 공백이 있는 문자열과 같이 완전히 잘못된 값을 입력하는 것을 방지할 수 있습니다. 대부분의 브라우저는 [email protected]를 이메일 입력에 유효한 것으로 받아들입니다. 좀 더 제한적인 것을 원한다면 `패턴` 특성을 추가할 수 있습니다.

예:”[^ @][email protected]++. [a-z]+” 클라이언트 측 유효성 검사 – 유효성 검사는 클라이언트 컴퓨터 웹 브라우저에서 수행됩니다.