jquery.validate 사용 가이드 1부_jquery-JS 튜토리얼-php.cn

jquery.validate 사용 가이드 1부_jquery

WBOY

풀어 주다： 2016-05-16 18:24:02

원래의

796명이 탐색했습니다.

주로 여러 부분으로 나누어짐
jquery.validate 기본 사용법
jquery.validate API 설명
jquery.validate 사용자 정의
jquery.validate 일반적인 인증 코드 유형

다운로드 주소

jquery.validate 플러그인 문서 주소
http://docs.jquery.com/Plugins/Validation

홈페이지 jquery.validate 플러그인
http://bassistance.de/jquery-plugins/jquery-plugin-validation/

jquery.validate 플러그인 홈 페이지에서 제공되는 데모
http:// jquery.bassistance.de/validate /demo/

확인 규칙 다음은 기본 확인 규칙이며, 규칙을 사용자 정의할 수도 있습니다

(1)필수:true 필수 항목
(2) 원격:"check.php" ajax 메소드를 사용하여 check.php를 호출하여 입력 값을 확인합니다
(3)email:true 이메일을 올바른 형식으로 입력해야 합니다
(4)url:true URL을 올바른 형식으로 입력해야 합니다
(5)date:true 날짜를 올바른 형식으로 입력해야 합니다
(6)dateISO:true 날짜(ISO)를 입력해야 합니다 올바른 형식으로 입력하세요. 예: 2009-06-23, 1998/01/22 형식만 확인하고 유효성 확인은 하지 않음
(7)number:true 법적 숫자(음수, 소수)를 입력해야 합니다.
(8)digits:true 정수를 입력해야 합니다
(9)creditcard: 유효한 신용카드 번호를 입력해야 합니다
(10)equalTo:"#field" 입력 값은 #field와 동일해야 합니다
(11)accept: 유효한 접미사(업로드된 파일의 접미사)가 포함된 문자열을 입력하세요.
(12)maxlength:5 입력 길이 최대 5자까지의 문자열(한자는 1자로 계산됩니다.)
(13)minlength:10 최소 길이가 10자 이상인 문자열을 입력하세요. (한자는 한 문자로 계산됩니다.)
(14)rangelength:[5,10] 길이를 입력하세요. 문자열은 5~10" 사이여야 합니다. ) (한자는 1자로 계산됩니다.)
(15)범위:[5,10] 입력값은 5~10 사이여야 합니다
(16)최대: 5 입력값은 5보다 클 수 없습니다.
(17)min:10 입력 값은 10보다 작을 수 없습니다.

확인 프롬프트

다음은 기본 확인 프롬프트입니다. 공식 웹사이트는 단순화된 버전입니다. 확인 프롬프트의 중국어 버전을 사용하거나 jQuery.extend(jQuery.validator.messages)를 통해 오류 프롬프트 메시지를 사용자 정의하여 웹 사이트의 확인 프롬프트 텍스트를 하나의 파일로 통합합니다.

코드 복사 코드는 다음과 같습니다.

 
필수: "이 필드는 필수입니다." , 
remote: "이 필드를 수정하세요.", 
email: "유효한 이메일 주소를 입력하세요.", 
url: "유효한 URL을 입력하세요.", 
date: "제발 유효한 날짜를 입력하세요.", 
dateISO: "유효한 날짜(ISO)를 입력하세요.", 
number: "유효한 숫자를 입력하세요.", 
digits: "숫자만 입력하세요.", 
 Creditcard: "유효한 신용카드 번호를 입력하세요.", 
equalTo: "같은 값을 다시 입력하세요.", 
accept: "유효한 확장자와 함께 값을 입력하세요.", 
maxlength: $.validator.format("{0}자 이하로 입력하세요."), 
minlength: $.validator.format("최소 {0}자를 입력하세요."), 
 rangelength: $ .validator.format("{0}에서 {1}자 사이의 값을 입력하세요."), 
range: $.validator.format("{0}에서 {1 사이의 값을 입력하세요. }." ), 
max: $.validator.format("{0}보다 작거나 같은 값을 입력하세요."), 
min: $.validator.format("더 큰 값을 입력하세요. {0} 이상.") 

사용법

1:
컨트롤에서 기본 유효성 검사 규칙을 사용합니다. 예:
이메일(필수) 2:
컨트롤에서 유효성 검사 규칙을 사용자 정의할 수 있습니다. 예:
사용자 정의(필수) ) 입력, [3,5])

3: 유효성 검사 사용자 정의 javascript를 통한 규칙, 다음 JS는 두 가지 규칙, 비밀번호 및 확인 비밀번호

코드 복사 코드는 다음과 같습니다.

 
$().ready(function() { 
$("#form2").validate({ 
규칙: { 
비밀번호: { 
필수: true , 
 최소 길이: 5 
}, 
confirm_password: { 
필수: true, 
최소 길이: 5, 
equalTo: "#password" 
} 
}, 
messages: { 
password: { 
필수: "비밀번호가 입력되지 않았습니다.", 
minlength: jQuery.format("비밀번호는 {0}자보다 작을 수 없습니다.") 
}, 
confirm_password: { 
required: "비밀번호 확인 없음", 
minlength: "확인 비밀번호는 {0}자 이상이어야 합니다.", 
equalTo: "두 번 입력한 비밀번호가 일치하지 않습니다." 
} 
} 
}); 
}); 

필수 true/false로 설정하는 것 외에도

코드 복사 코드는 다음과 같습니다.

 
$("#form2").validate({ 
규칙: { 
funcvalidate: { 
필수: function() {return $("#password").val() !=""; } 
} 
}, 
메시지: { 
funcvalidate: { 
필수: "비밀번호가 있는 경우 필수" 
} 
} 
}) 

Html
비밀번호
비밀번호 확인
조건부 확인

4: 메타 사용 확인 정보를 맞춤 설정하려면

먼저 JS로 메타를 설정하세요.
$("#form3").validate({ meta: "validate" })

Html

이메일

5: 메타를 사용하여 사용자 정의 태그에 유효성 검사 규칙(예: 유효성 검사

JS 세트 메타
$())을 작성합니다. Ready(function() {
$.metadata.setType("attr", "validate");
$("#form1").validate();
}); >Html

이메일
validate="{required:true, email:true, message:{필수:' 이메일 주소를 입력하세요' , email:'입력한 이메일 주소는 유효한 이메일 주소가 아닙니다.'}}" />

6: 사용자 정의 확인 규칙
복잡한 경우 확인을 위해 추가할 수 있습니다. jQuery.validator.addMethod를 통한 사용자 정의 확인 규칙

공식 웹사이트에서 제공하는 extra-methods.js에는 letteronly, ziprange, nowhitespace 등과 같이 일반적으로 사용되는 확인 방법이 포함되어 있습니다.

예시

코드 복사 코드는 다음과 같습니다.

// 문자 유효성 검사

jQuery. validator.addMethod("userName", function(value, element) { 
return this.ional(element) || /^[u0391-uFFE5w] $/.test(value); 
}, "사용자 이름은 한자, 영문자, 숫자, 밑줄만 포함"); 

//그러면 이 규칙을 사용하면 됩니다 
$("#form1").validate({ 
// 유효성 검사 규칙
규칙: { 
userName: { 
필수: true, 
userName: true, 
rangelength: [5,10] 
} 
}, 
/* 설정 오류 메시지*/ 
메시지: { 
userName: { 
필수: "사용자 이름을 입력하세요.", 
rangelength: "사용자 이름은 5-10자 사이여야 합니다." 
} 
}, 
}) 

 

7: 라디오, 체크박스, 선택의 확인 방법은
라디오 확인
과 유사합니다.
성별

남성< ;br />
여성

체크박스

2개 이상의 항목 선택

옵션 1class = "{필수:true,최소 길이:2, 메시지:{필수:'선택해야 함',최소 길이:'최소 2개의 항목을 선택해야 합니다.'}}" />

옵션 2

옵션 3

확인 선택

드롭다운 상자

< select id="selectbox" name="selectbox" class="{required:true}">
"1" >1
2
3
< ;/select> ;

8: Ajax 확인

Ajax 확인은 원격remote: {
url: " url", / /url 주소
유형: "post", //전송 방법
dataType: "json", //데이터 형식 데이터: { //전송할 데이터
사용자 이름: function() {
return $("#username").val();
}}
}

보충: jQuery 유효성 검사 플러그인의 원격 확인 방법에 있는 버그

http://www.jb51.net/article/24079.htm

다음 장에서는 API에 대해 자세히 설명하고 jQuery.validate를 추가로 사용자 정의하는 방법을 정리합니다. 그리고 인터넷에서 흔히 사용되는 인증번호