jquery.validate_jquery 사용 지침

1. 준비
JQuery 버전 1.2.6 필요, 1.3.2와 호환 가능

공식 홈페이지 주소: http://jqueryvalidation.org/

2. 기본 확인 규칙
(1)required:true 필수 필드
(2)remote:"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자 이하의 문자열을 입력하세요. (한자는 한자로 계산됩니다.)
(13 )minlength:10 최소 길이가 10자 이상인 문자열을 입력하세요. (한자는 한자로 계산됩니다.)
( 14)rangelength:[5,10] 길이가 5~10" 사이인 문자열을 입력하세요.) (한자는 1자로 계산됩니다.)
(15)range:[5,10] 입력값은 5자 사이여야 합니다. 및 10
(16)max:5 입력 값은 5보다 클 수 없습니다.
(17)min:10 입력 값은 10보다 작을 수 없습니다.

3. 기본 프롬프트

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

messages: {
필수: "이 필드는 필수입니다.",
remote: "이 필드를 수정하세요.",
email: "유효한 이메일 주소를 입력하세요.",
url : "유효한 URL을 입력하세요.",
date: "유효한 날짜를 입력하세요.",
dateISO: "유효한 날짜(ISO)를 입력하세요.",
dateDE: "Bitte geben Sie eing gbrow ltiges Datum ein.",
number: "유효한 숫자를 입력하세요.",
numberDE: "Bitte geben Sie eine Nummer ein.",
digits: "숫자만 입력하세요. ",
creditcard: "유효한 신용카드 번호를 입력하세요.",
equalTo: "같은 값을 다시 입력하세요.",
accept: "유효한 확장자와 함께 값을 입력하세요.",
maxlength: $.validator.format("{0}자 이하로 입력하세요."),
minlength: $.validator.format("최소 {0}자를 입력하세요."),
rangelength: $.validator.format("{0}에서 {1}자 사이의 값을 입력하세요."),
range: $.validator.format("{0}에서 {1}자 사이의 값을 입력하세요." {1 }."),
max: $.validator.format("{0}보다 작거나 같은 값을 입력하세요."),
min: $.validator.format("값을 입력하세요. 값이 {0}보다 크거나 같습니다.")
},

수정해야 하는 경우 js 코드에 추가할 수 있습니다.

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

jQuery.extend(jQuery.validator.messages, {
필수: "필수 필드",
remote: "이 필드를 수정하세요.",
email: "올바른 이메일 형식을 입력하세요.",
url: "법적 URL을 입력하세요.",
date: "법적 날짜를 입력하세요.",
dateISO: "법적 날짜(ISO)를 입력하세요.",
number: "법적 숫자를 입력하세요.",
digits: "정수만 입력할 수 있습니다." ,
creditcard: "법적 날짜를 입력하세요. 신용카드 번호",
equalTo: "같은 값을 다시 입력하세요.",
accept: "법적 접미사가 포함된 문자열을 입력하세요.",
maxlength: jQuery.validator.format("길이가 최소 {0}인 A 문자열을 입력하세요."),
minlength: jQuery.validator.format("길이가 최소 {0}인 문자열을 입력하세요. }"),
rangelength: jQuery.validator.format( "길이가 {0}에서 {1} 사이인 문자열을 입력하세요."),
range: jQuery.validator.format("값을 입력하세요. {0}과 {1} 사이 "),
max: jQuery.validator.format("최대값이 {0}인 값을 입력하십시오."),
min: jQuery.validator.format("제발 최소 {0}개의 값을 입력하세요. ")
});

이 파일을 message_cn.js에 넣고 를 페이지에 소개하는 것이 좋습니다.

4. 사용 방법
1. 컨트롤에 확인 규칙을 작성합니다

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

 
 
 
 

 

 
이름 
 

 

 
이메일 
 

 

 
비밀번호 
 

 

 
确认密码 
 

 

 
 

 

 

使useclass="{}"적방式，必须引入包：jquery.metadata.js 可以使用如下적방법，修改提示内容：
class="{필수:true,minlength :5,메시지: {필수:'请输入内容'}}"사용이 동일합니다. :'#password'}"另外一个方式，使用关键字：meta（为了元数据使用其他插件你要包装 你的验证规则 他们自己的项目中可以用这个特殊的选项)
검증 플러그인에 알리기 유효성 검사 규칙에 대한 메타데이터의 유효성 검사 속성 내부를 살펴봅니다.
例如：

复system代码 代码如下:

meta: "validate"

再有一种方式：

复主代码 代码如下:

$.metadata.setType("attr", "validate");这样可以使用validate="{required:true}"적방향式，或者class="required"，但class="{required:true,minlength: 5}"将不起작용 2.将校验规则写到代码中 
$().ready(function() { 
$("#signupForm").validate({ 
규칙: {
이름: "필수", 
이메일: { 
필수: true, 
이메일: true 
}, 
비밀번호: { 
필수: true,
최소 길이 : 5 
}, 
confirm_password: { 
필수: true, 
최소 길이: 5, 
equalTo: "#password" 
} 
}, 
메시지: { 
이름: "请输入姓name", 
이메일: { 
필수: "请输入Email地址", 
이메일: "请输入正确的email地址" 
}, 
password: { 
필수: "请输入密码", 
최소 길이: jQuery.format("密码不能小于{0}个字符") 
}, 
confirm_password: { 
필수 : "请输入确认密码", 
minlength: "确认密码不能小于5个字符", 
equalTo: "两次输入密码不一致不一致"
}
} 
});
});//messages处，如果某个控件没有message，将调用默认的信息

复代代码 代码如下:

 

 
이름 
 

 

 
이메일 
 

 

 
비밀번호 
 

 

 
确认密码 
 

 

 
 

 

 

필수:true 必须有值
필수:"#aa:checked" 表达式的值为真，则需要验证
필수:function(){}返回为真,表时需要验证
后边两种常用于，表单中需要同时填或不填的元素

五、常注意问题

1. 이용 가능한 SUBMIT$().ready(function() {
$("#signupForm").validate({
submitHandler:function(form){
alert ("제출됨");
form.submit();
}
});
});

validate의 유효성을 검사하는 방법은 다음과 같습니다.
$.validator.setDefaults({
submitHandler: function(form) { Alert("제출됨!");form.submit(); }
});

如果想提交表单, 需要使用form.submit()而不要使用$(form).submit()

2.debug, 如果这个参数为true, 那么表单不会提交, 只进行检查, 调试时十分方便
$().ready(function() {
$("#signupForm") .validate({
디버그:true
});
});

如果一个页face中多个表单，사용
$.validator.setDefaults({
디버그: true
})

3.ignore：忽略某些元素不验证
ignore: ".ignore"

4.errorPlacement：콜백 기본값: 把错误信息放재验证的元素后면

}//示例：

复代码 代码如下:   이름 

 
 

 
 
 
 
14/02/07 
 
 
 
02/14/07 
 
 
 
 
 
 

 
 
이용약관을 읽었으며 이에 동의합니다. 

 
 
errorPlacement: function(error, element) { 
if ( element.is(":radio") ) 
error.appendTo( element.parent().next().next () ); 
else if ( element.is(":checkbox") ) 
error.appendTo ( element.next() ); 
else 
error.appendTo( element.parent().next() ); 
}


코드의 기능은 다음과 같습니다. 일반적인 상황에서는 오류 메시지가 에 표시되고, 라디오인 경우 에 표시되며, 확인란인 경우 내용 뒤에 표시됩니다. errorClass: 문자열 기본값: "error"

오류 프롬프트의 CSS 클래스 이름을 지정하고 오류 프롬프트 스타일을 사용자 정의할 수 있습니다. errorElement: 문자열 기본값: "label"

오류를 표시하려면 어떤 라벨을 사용해야 하나요? 기본값은 emerrorContainer: Selector로 변경할 수 있습니다.

인증 정보를 표시하거나 숨기면 오류 메시지가 나타날 때 표시할 컨테이너 속성이 자동으로 변경되고, 오류가 없을 때 숨길 수 있습니다.

errorContainer: "#messageBox1, #messageBox2"errorLabelContainer：선택기

오류 메시지를 컨테이너에 넣습니다. 래퍼: 문자열

위의 errorELement를 래핑하려면 어떤 태그를 사용해야 합니까? 일반적으로 이 세 가지 속성은 컨테이너에 모든 오류 프롬프트를 표시하고 정보가 없을 때 errorContainer를 자동으로 숨기는 기능을 구현하는 데 동시에 사용됩니다. .오류",

errorLabelContainer: $("#signupForm div.error"),
wrapper: "li" 오류 프롬프트의 스타일을 설정합니다. input.error를 표시하는 아이콘을 추가할 수 있습니다. border: 1px solid red }
label.error {
배경:url("./demo/images/unchecked.gif") no-repeat 0px 0px; padding-bottom: 2px; 색상: #EA5200;
}
label.checked {
background:url("./demo/images/checked.gif") 반복 없음 0px 0px;
}성공: 문자열, 콜백

검증할 요소가 검증을 통과한 후의 작업 뒤에 문자열이 오면 CSS 클래스로 처리되거나
success: function(label) {// IE용 텍스트로 설정
label.html(" ").addClass("checked");
//label.addClass("valid").text("Ok!")
}

유효성 검사 요소에 "valid"를 추가하고 CSS에 정의된 스타일

success: "valid" nsubmit: Boolean 기본값: true

제출 시 확인합니다. false로 설정한 경우 다른 방법을 사용하여 확인하세요.

onfocusout: 부울 기본값: true

포커스 상실은 유효성 검사입니다(체크박스/라디오 버튼 제외)

onkeyup: 부울 기본값: true

키업에서 확인하세요.

onclick: 부울 기본값: true

체크박스 및 라디오 클릭에 대한 유효성 검사

focusInvalid: 부울 기본값: true

양식이 제출된 후 유효성 검사에 실패한 양식(제출 전에 포커스를 받은 첫 번째 또는 실패한 유효성 검사 양식)에 포커스가 부여됩니다.

focusCleanup: Boolean 기본값: false

참이면 유효성 검사에 실패한 요소에 포커스가 있을 때 오류 메시지를 제거합니다. focusInvalid와 함께 사용하지 마세요. // 양식 재설정

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

$( ).ready(function() {
var 유효성 검사기 = $("#signupForm").validate({
submitHandler:function(form){
alert("submitted");
form.submit();
}
})
$("#reset").click(function() {
validator.resetForm();
}); });

확인을 위해 ajax를 사용합니다. 기본적으로 현재 확인된 값이 원격 주소로 제출됩니다. 다른 값을 제출해야 하는 경우 데이터 옵션을 사용할 수 있습니다

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

remote: {
url: "check-email. php", //백엔드 핸들러
type: "post", //데이터 전송 방법
dataType: "json", //데이터 형식 허용
data: { //전송할 데이터
username: function() {
return $( "#username").val();
}
}
}

원격 주소는 " true" 또는 "false"이며 다른 출력을 가질 수 없습니다. addMethod: 이름, 방법, 메시지
사용자 정의 확인 방법

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

// 한자 2바이트
jQuery.validator.addMethod("byteRangeLength", function(value, element, param) {
var length = value.length;
for(var i = 0; i if(value.charCodeAt(i) > 127){
length
}
}
return this.ional(element) | ( length >= param[0] && length // 우편번호 확인
jQuery.validator.addMethod("isZipCode", function( 값, 요소) {
var tel = / ^[0-9]{6}$/;
return this.ional(element) || (tel.test(value)), "우편번호를 정확하게 입력해주세요.");

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

라디오와 체크박스를 확인하고 선택하려면 둘 중 하나를 선택해야 합니다.

확인란의 필수는 선택해야 한다는 의미입니다.
체크박스의 최소 길이는 선택해야 하는 최소 항목 수를 나타냅니다. maxlength는 선택해야 하는 최대 항목 수를 나타냅니다. rangelength:[2,3]은 선택한 수 범위를 나타냅니다.


필수 select에서 선택한 값은 비어 있을 수 없음을 의미합니다.
< ;select id="jungle" name="jungle" title="뭔가를 선택하세요!" class="{required:true}"> 옵션 값="">
부가
바가 >Oi option> ] 선택한 숫자 간격을 나타냅니다.




코드 복사

코드는 다음과 같습니다.

라디오, 확인란을 선택하고 필수가 라디오가 하나를 선택해야 함을 의미하는지 확인하세요. < ;input type="radio" id="gender_female" value="f" name="gender"/>체크박스 필수는 이를 의미합니다. 선택해야 합니다. 반드시 선택해야 하며 maxlength는 선택한 항목의 최대 개수를 나타내고 rangelength:[2,3]은 선택한 항목의 범위를 나타냅니다.

🎜>select에 필수는 선택한 값이 비어 있을 수 없음을 의미합니다.
>
Buga< ;/option>
바가 ;
Oi
>select의 최소 길이는 선택한 항목의 최소 개수(다중 선택 가능)를 나타내고, maxlength는 최대 항목 수를 나타냅니다. 선택한 숫자 및 rangelength:[2,3]은 선택한 숫자 범위를 나타냅니다

;option value="b">바나나
사과
복숭아
거북이