Parsley.js는 번거로운 코드 작성 없이 클라이언트 측 폼 유효성 검사 UX를 제공합니다.
초기화
// 권장되는 JavaScript 초기화
$('#myForm').parsley({
errorClass: 'is-invalid',
successClass: 'is-valid'
});
표준 HTML 유효성 검사 제약 조건
<!-- 필수 입력 -->
<input required />
<!-- 이메일 및 URL 형식 -->
<input type="email" />
<input type="url" />
<!-- 길이 제한 -->
<input minlength="6" maxlength="20" />
<input data-parsley-length="[6, 20]" />
<!-- 숫자 및 정규식 패턴 -->
<input pattern="^[A-Z0-9]+$" />
<input data-parsley-type="digits" />
<input data-parsley-type="alphanum" />
<!-- 숫자 범위 -->
<input type="number" min="1" max="100" />
<input data-parsley-range="[1, 100]" />
<!-- 체크박스 선택 개수 제한 -->
<input type="checkbox" name="hobbies" data-parsley-mincheck="2" />
<!-- 비밀번호 확인 일치 검증 -->
<input id="password" type="password" />
<input type="password" data-parsley-equalto="#password" />
JavaScript 폼 & 필드 API
폼 메서드
const form = $('#myForm').parsley();
form.isValid(); // 유효하면 true, 유효하지 않으면 false 반환
form.validate(); // 유효성 검사 실행 및 오류 메시지 표시
form.reset(); // 유효성 검사 상태 초기화 및 오류 제거
form.destroy(); // 폼에서 Parsley 핸들러 연결 해제
필드 메서드
const field = $('#username').parsley();
field.isValid();
field.validate(); // 실패한 제약 조건 객체 배열 반환
사용자 정의 유효성 검사기
커스텀 유효성 검사기를 전역으로 등록합니다:
window.Parsley.addValidator('multipleOf', {
requirementType: 'integer',
validateNumber(value, requirement) {
return value % requirement === 0;
},
messages: {
ko: '이 값은 %s의 배수여야 합니다.',
en: 'This value must be a multiple of %s.'
}
});
마크업 사용법:
<input type="number" data-parsley-multiple-of="5" />