Parsley.js를 사용하여 양식 유효성 검사

이 튜토리얼에서는 주로 양식 유효성 검사에 사용되는 JavaScript 라이브러리인 Parsley.js를 사용하는 방법을 보여줍니다. Parsley는 매우 미묘하고 간단한 방법으로 양식의 유효성을 검사하는 데 도움이 되며 널리 사용되는 양식 유효성 검사 라이브러리 중 하나입니다.

Parsley.js의 기능

파슬리가 JavaScript 양식 유효성을 검사하는 데 좋은 선택인 데에는 여러 가지 이유가 있습니다. 그 중 일부는 아래에 언급되어 있습니다.

• 직관적인 DOM API - DOM API를 사용하면 HTML 마크업에서 일반 영어를 사용할 수 있으며 Parsley가 나머지 작업을 수행합니다. 간단한 양식 유효성 검사의 경우에도 JavaScript를 한 줄도 작성할 필요가 없습니다.

• 동적 양식 유효성 검사 - Parsley는 양식 수정 사항을 쉽게 감지하고 그에 따라 유효성 검사를 적용할 수 있습니다.

• 많은 검증기 - Parsley에는 수많은 내장 검증기가 있습니다. 필요한 경우 Ajax 유효성 검사기를 사용할 수도 있습니다.

• 높은 신뢰성 - 버그가 없으며 엄격한 테스트도 거쳤습니다.

• 사용자 경험 중심 - Parsley는 UI와 UX를 전문으로 하며 사용자의 정확한 요구 사항에 맞게 거의 모든 Parsley의 기본 동작을 재정의할 수도 있습니다.

파슬리를 사용하여 양식 유효성을 검사하는 방법

이제 Parsley.js에 대해 조금 알았으니 이제 Parsley를 사용한 예제에 집중할 차례입니다. 간단한 JavaScript 코드가 포함된 양식이 있는 다음 "index.html" 파일을 고려해 보세요.

예

index.html

으아악

상단의 "편집 및 실행" 버튼을 클릭하여 이 코드를 실행하고 출력 형식을 확인하세요.

지침

이 코드에는 서로 다른 값이 필요한 여러 텍스트 영역이 있는 양식이 있습니다. 각 값에는 텍스트 키워드, 확인란 또는 옵션이 있습니다.

또한 코드 끝에 "확인" 버튼이 있습니다. 양식을 작성하지 않고 버튼을 클릭하면 Parsley에서 팝업 오류가 발생하고, 입력한 필드 중 일부가 예상과 일치하지 않으면 Parsley.js에서 유효성 검사 오류가 발생합니다.

여기에서 이 코드를 실행하고 선택한 테스트 목적에 따라 다양한 필드를 채울 수 있습니다.

결론

이 튜토리얼에서는 간단한 예를 사용하여 Parsley.js를 사용하여 JavaScript에서 양식의 유효성을 검사하는 방법을 보여줍니다.

위 내용은 Parsley.js를 사용하여 양식 유효성 검사의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!