자바 스크립트 유효성 검사 예제

Off
Non classé

클라이언트 측 유효성 검사는 사용자의 웹 브라우저 내에서 유효성 검사가 발생하기 때문에 더 빠르기 때문에 더 나은 사용자 환경을 만드는 데에도 유용하지만 서버 측 유효성 검사는 서버에서 발생하므로 사용자의 입력을 먼저 제출하고 전송해야 합니다. 유효성 검사가 발생하기 전에 서버, 또한 사용자는 정확히 무엇이 잘못되었는지 알고 서버 응답을 기다려야합니다. 경우에 따라 일부 원격 유효성 검사를 수행하는 것이 유용할 수 있습니다. 사용자가 입력한 데이터가 응용 프로그램의 서버 쪽에 저장된 추가 데이터에 연결되어 있는 경우 이러한 종류의 유효성 검사가 필요합니다. 이 에 대한 한 가지 사용 사례는 사용자 이름을 요청하는 등록 양식입니다. 중복을 방지하려면 사용자에게 데이터를 보내달라고 요청한 다음 오류로 양식을 다시 보내는 대신 AJAX 요청을 수행하여 사용자 이름의 가용성을 확인하는 것이 더 좋습니다. 먼저 사용자가 제출 버튼을 클릭 할 때 JavaScript를 사용하여 클라이언트 측에서 유효성을 검사할 간단한 HTML 양식을 만들어 보겠습니다. 글쎄, « 응용 프로그램 form.html »이라는 HTML 파일을 만들고 다음 코드를 배치 한 다음 시스템에 어딘가에 저장해 보겠습니다. 다음 섹션에서는 JavaScript 양식 유효성 검사를 수행하고 적절하고 적절하게 발견된 입력 오류를 처리하는 방법을 자세히 살펴보겠습니다.

정규식 ^w ++$는 입력이 비어 있는 경우 *대신 +를 사용했기 때문에 하나 이상의 문자가 필요하므로 실패합니다. 따라서 예제의 첫 번째 테스트는 입력이 비어 있을 때 다른 오류 메시지를 제공하기 위해서만 필요합니다. 더 이상 양식 필드의 유효성을 검사하기 위해 미친 긴 정규식 패턴이 필요하지 않습니다. 우리가 사용할 수있는 html 속성뿐만 아니라 몇 가지 열심히, 내장 된 자바 스크립트 기능을 사용하여, 우리는 간단한 클라이언트 측 양식 유효성 검사를 할 수 있습니다. 점점 더 많은 브라우저가 제약 조건 유효성 검사 API를 지원하며 신뢰할 수 있게 되었습니다. 이 API는 특정 양식 요소 인터페이스에서 사용할 수 있는 메서드 및 속성 집합으로 구성됩니다. 필드의 값이 최소 특성보다 낮거나 최대 특성보다 높으면 필드가 유효하지 않습니다. 다른 예를 살펴보겠습니다. fruit-start.html 파일의 새 복사본을 만듭니다.

일반적으로 선택한 항목 수에 따라 양식을 제출하거나 제출하지 않도록 이 옵션을 수정합니다. 예를 들어 « 2개 이상 » 또는 « 5개 이하 »입니다. 이것은 간단한 운동이어야합니다. 사용자가 제출한 값이 유효성 검사를 통과하는지 여부를 확인하는 JavaScript 함수(값이 유효성을 검사하는 각 입력 필드에 대해 하나씩)를 만듭니다. 기본적으로 전자 메일 입력 필드는 JavaScript 및 정규식을 사용하여 패턴을 확인하는 것처럼 입력된 텍스트의 상태를 추적합니다. 동일한 정규식을 작성하려는 경우 다음과 같이 표시됩니다: HTML 양식 유효성 검사는 브라우저에서 자동으로 수행할 수 있습니다: 아래는 HTML, CSS 및 JavaScript의 코드로 폼의 유효성을 검사합니다. HTML은 양식을 만드는 데 사용됩니다. 자바 스크립트는 양식의 유효성을 검사합니다. 형식의 레이아웃을 디자인하는 CSS입니다.

클라이언트가 필요한 모든 데이터를 입력한 다음 제출 단추를 누른 후 일반적으로 서버에서 발생하는 양식 유효성 검사입니다. 클라이언트가 입력한 데이터가 올바르지 않거나 단순히 누락된 경우 서버는 모든 데이터를 클라이언트로 다시 보내고 올바른 정보로 양식을 다시 제출하도록 요청해야 합니다. 이것은 실제로 서버에 많은 부담을 주었던 긴 과정이었습니다. 입력이 올바르거나 올바르지 않은 경우 정확하고 잘못된 이미지를 표시하는 대화형 JavaScript 양식 유효성 검사 예제를 살펴보겠습니다. 다음은 HTML의 기본 제공 유효성 검사 기능의 사용을 보여 줄 수 있는 전체 예제입니다. 이 문서에 대해 듣고 싶습니다. 그리고 우리는이 예제를 개선하기 위해 건설적인 제안을 환영합니다. 그림에 따라 어떤 필드, 어떤 유효성 검사를 부과할지 보여줍니다. 참고: 일부 요소 형식은 유효성을 검사할 패턴 특성이 필요하지 않습니다.

예를 들어 전자 메일 형식을 지정하면 잘 구성된 전자 메일 주소 또는 여러 특성이 있는 경우 잘 구성된 전자 메일 주소 또는 쉼표로 구분된 전자 메일 주소 목록과 일치하는 정규식에 대해 입력된 값의 유효성을 검사합니다.

Comments are closed.