jquery 유효성 검사 양식 유효성 검사 데모

jQuery 유효성 검사 프레임워크

6. 프레임워크 내장 유효성 검사 방법(내장 유효성 검사 방법 목록)

[1] 필수() 반환: 부울
 설명: 양식 요소를 필수로 작성(선택)하도록 만듭니다.
 양식 요소가 비어 있거나(텍스트 입력) 선택되지 않았거나(라디오/체크박스) 빈 값이 선택된 경우(선택)
 텍스트 입력, 선택, 확인란 및 라디오 버튼에 대해 작동합니다.
 select가 null 옵션Choose...을 제공하는 경우 사용자가 하나를 선택하도록 합니다. 비어 있지 않은 값입니다.

Js 코드
$("#myform").validate({
 규칙: {
 과일: "필수"
 }
})

[2] 필수(종속성 표현식) 반환: 부울
 매개변수 종속성 표현식 유형: 문자열 양식 컨텍스트의 표현식(문자열)은 표현식에 따라 달라집니다. 또는 그 이상의 요소.
 설명: 매개변수의 반환 값에 따라 양식 요소를 채워야(선택해야 함) 만듭니다.
 #foo:checked, #foo:filled, #foo:visible과 같은 선택 필터는 표현식에 자주 사용됩니다.

Js 코드
$("#myform").validate({
 규칙: {
 세부 정보: {
 필수: "#other:checked"
 }
 }, debug:true
});
$("#other").click(function() {
 $("#details").valid();
}) ;

[3] 필수( dependency-callback ) 반환: 부울
 매개변수 dependency-callback 유형: 콜백 이 함수는 확인할 양식 요소를 유일한 매개변수로 사용합니다. 콜백 함수가 true를 반환하면 양식 요소가 필요합니다.
 설명: 매개변수의 반환 값에 따라 양식 요소를 채워야(선택해야 함) 만듭니다.
 #foo:checked, #foo:filled, #foo:visible과 같은 선택 필터는 표현식에 자주 사용됩니다.

Js 코드
$("#myform").validate({
 규칙: {
 연령: {
 필수: true,
 최소: 3
 },
 부모: {
 필수: function(element) {
 return $("#age").val()
 }
 }
 }
});
$("#age").blur(function() {
 $("#parent").valid();
}); 4] 원격( 옵션 ) 반환: 부울
 매개변수 옵션 유형: 문자열, 옵션 서버측 리소스를 요청하기 위한 url(문자열). 또는 $.ajax() 메소드의 옵션.
 설명: 서버 측 리소스 확인을 요청합니다.
 서버 측 리소스는 $.ajax(XMLHttpRequest)를 통해 키/값 쌍을 얻습니다. 응답이 true를 반환하면 양식이 확인을 통과합니다.

Js 코드
$("#myform").validate({
 규칙: {
 이메일: {
 필수: true,
 이메일: true,
 원격: "check-email.php"
 }
 }
});

[5] minlength( length ) 반환: Boolean
 매개변수 길이 유형: 정수 이상 필수 문자 수.
 설명: 양식 요소가 지정된 최소 문자 수를 충족하는지 확인하세요.
 텍스트 입력에 문자가 너무 적게 입력되었고, 체크박스가 충분히 선택되지 않았으며, 선택박스에서 옵션이 충분히 선택되지 않았습니다. 이 세 가지 경우에 이 메서드는 false를 반환합니다.

Js 코드
$("#myform").validate({
 규칙: {
 필드: {
 필수: true,
 최소 길이: 3
 }
 }
});

[6] maxlength( length ) 반환: Boolean
 매개변수 길이 유형: 정수 입력할 수 있는 최대 문자 수입니다.
 설명: 양식 요소의 텍스트가 지정된 최대 문자 수를 초과하지 않는지 확인하세요.
 텍스트 입력에 문자를 너무 많이 입력하고, 체크박스를 너무 많이 선택하고, 선택박스에 옵션을 너무 많이 선택하지 않았습니다. 이 세 가지 경우에 이 메서드는 false를 반환합니다.

Js 코드
$("#myform").validate({
 규칙: {
 필드: {
 필수: true,
 최대 길이: 4
 }
 }
});

[7] rangelength( range ) 반환: Boolean
 매개변수 범위 유형: Array
 설명: 양식 요소의 텍스트 문자 수가 지정된 범위 내에 있는지 확인하세요.
 텍스트 입력란에 입력한 문자 수가 주어진 범위를 벗어나고, 선택된 체크박스가 주어진 범위를 벗어났으며, 선택박스에서 선택한 옵션이 주어진 범위를 벗어났습니다. 이 세 가지 경우에 이 메서드는 false를 반환합니다.

Js 코드
$("#myform").validate({
 규칙: {
 필드: {
 필수: true,
 범위 길이: [2, 6 ]
 }
 }
});

[8] min( value ) 반환: Boolean
 매개변수 값 유형: 정수 입력해야 하는 최소 정수입니다.
 설명: 양식 요소의 값이 지정된 최소 정수보다 크거나 같은지 확인하세요.
 이 방법은 텍스트 입력창(텍스트 입력)에서만 유효합니다.

Js 코드
$("#myform").validate({
 규칙: {
 필드: {
 필수: true,
 최소: 13
 }
 }
});

[9] max( value ) 반환: 부울
 매개변수 값 유형: 정수 주어진 최대 정수입니다.
 설명: 양식 요소의 값이 주어진 최대 정수보다 작거나 같은지 확인하세요.
 이 방법은 텍스트 입력창(텍스트 입력)에서만 유효합니다.

Js 코드
$("#myform").validate({
 규칙: {
 필드: {
 필수: true,
 최대: 23
 }
 }
});

[10] range( range ) 반환: Boolean
 매개변수 범위 유형: Array
 설명: 양식 요소의 값이 지정된 범위 내에 있는지 확인하세요.
 이 방법은 텍스트 입력창(텍스트 입력)에서만 유효합니다.

Js 코드
$("#myform").validate({
 규칙: {
 필드: {
 필수: true,
 범위: [13, 23 ]
 }
 }
});

[11] email( ) 반환: 부울
 설명: 양식 요소의 값이 유효한 이메일 주소인지 확인하세요.
 값이 유효한 이메일 주소이면 true를 반환합니다. 이 방법은 텍스트 입력 상자(텍스트 입력)에서만 유효합니다.

Js 코드
$("#myform").validate({
 규칙: {
 필드: {
 필수: true,
 이메일: true
 }
 }
});

[12] url( ) 반환: 부울
 설명: 양식 요소의 값이 유효한 URL 주소(http://www)인지 확인하세요. .mydomain.com).
 값이 유효한 URL 주소이면 true를 반환합니다. 이 방법은 텍스트 입력 상자(텍스트 입력)에서만 유효합니다.

Js 코드
$("#myform").validate({
 규칙: {
 필드: {
 필수: true,
 url: true
 }
 }
});

[13] date( ) dateISO( ) dateDE( ) 반환: 부울
 설명: 유효한 날짜를 확인하는 데 사용됩니다. 이 세 가지 함수로 확인되는 날짜 형식은 각각 (mm/dd/yyyy), (yyyy-mm-dd,yyyy/mm/dd), (mm.dd.yyyy)입니다.

Js 코드
$("#myform").validate({
 규칙: {
 필드: {
 필수: true,
 날짜: true
 /*dateISO: true
 dateDE: true*/
 }
 }
})

[14] number( ) numberDE() 반환: 부울
 설명: 소수점을 확인하는 데 사용됩니다. number()의 소수점은 점( . )이고, numberDE()의 소수점은 쉼표( , )입니다.

Js 코드
$("#myform").validate({
 규칙: {
 필드: {
 필수: true,
 숫자: true
 //numberDE: true
 }
 }
});

[15] digits() 반환: 부울
 설명: 텍스트 상자의 값이 숫자인지 확인하세요. .

Js 코드
$("#myform").validate({
 규칙: {
 필드: {
 필수: true,
 숫자: true
 }
 }
});

[16] digits() 반환: 부울
 설명: 텍스트 상자의 값이 숫자인지 확인하세요.

Js 코드
$("#myform").validate({
 규칙: {
 필드: {
 필수: true,
 숫자: true
 }
 }
});

[17] accept( [extension] ) 반환: Boolean
 매개변수 확장(선택) 유형: 문자열 허용되는 파일 접미사 이름, "|" 사용 ","로 구분합니다. 기본값은 "png|jpe?g|gif"입니다.
 설명: 양식 요소가 지정된 파일 확장자를 가진 파일을 수신하는지 확인하세요. 매개변수를 지정하지 않으면 이미지(png, jpeg, gif)만 허용됩니다.

Js 코드
$("#myform").validate({
 규칙: {
 필드: {
 필수: true,
 수락: "xls|csv "
 }
 }
});

[18] equalTo( other ) 반환값: Boolean
 매개변수 기타 유형: Selector 현재 값과 비교할 또 다른 양식 요소입니다.
 설명: 두 양식 요소의 값이 일치하는지 확인하세요.

Js 코드
$("#myform").validate({
 규칙: {
 비밀번호: "필수",
 비밀번호_다시: {
 equalTo: "# 비밀번호"
 }
 }
});