주의가 필요한 일반적인 메서드와 문제를 jQuery.validate_jquery

1. 다른 방법을 사용하여 기본 SUBMIT를 대체하세요

코드를 복사하세요 코드는 다음과 같습니다.

$().ready(function() {
$("#signupForm").validate({
submitHandler:function(form){
Alert("제출됨");
form.submit ();
                                          >

코드는 다음과 같습니다.

$(".selector").validate({ 
submitHandler: 함수 (form)

{  $(form) .ajaxSubmit(); } }) 은 다음과 같이 유효성 검사의 기본값을 설정할 수 있습니다. :

코드 복사


코드는 다음과 같습니다.

$.validator.setDefaults({
submitHandler: function(form) { Alert("submitted!");form.submit( ); }

});양식을 제출하려면 다음을 수행해야 합니다. $(form).submit() 대신 form.submit()을 사용하세요. 2.디버그, 확인만 하고 양식을 제출하지 않음이 매개변수가 true이면 양식을 제출하지 않고 확인만 하므로 디버깅에 매우 편리합니다

코드 복사

코드는 다음과 같습니다.

$().ready(function() {
$("#signupForm" ).validate({

debug:true });});디버그로 설정하려는 페이지에 여러 양식이 있는 경우

코드 복사


코드는 다음과 같습니다.

$.validator.setDefaults({
debug: true

})3.ignore: 특정 요소를 무시하고 확인하지 않음 ignore: ".ignore"4. 오류 메시지가 있는 위치를 변경합니다. 표시됨errorPlacement: 콜백

기본값: 확인된 요소 뒤에 오류 메시지를 넣습니다.
오류 위치를 나타냅니다. 기본값은 error.appendTo(element.parent())입니다. 즉, 확인된 요소 뒤에 오류 메시지를 넣습니다.
errorPlacement: function(error, element) {
error.appendTo(element.parent())
}

//예:

코드 복사


코드는 다음과 같습니다.

    이름
   



   
       
        14/02/07< ;/label>
   
   
       
        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() ) ;
}

현대적인 작품 사용: 一般情况下把错误信息显示在

中，如果是radio显示在中，如果是 체크박스显示는 内容의 后면에 있습니다 errorElement：문자열  기본값: "label"
사용什么标签标记错误，默认的是label你可以改成em

errorContainer：Selector
显示或者隐藏验证信息，可以自动实现有错误信息出现时把容器属性变为显示，无错误时隐藏，用处不大

errorContainer: "#messageBox1, #messageBox2"

errorLabelContainer：Selector
把错误信息统一放在一个容器里面。

래퍼:문자열
사용什么标签再把上边적errorELement包起来

errorContainer: "div.error",
errorLabelContainer: $("#signupForm div.error"),래퍼: "li"

5更改错误信息显示的样式

设置错误提示的样式, 可以增加图标显示, 该系统中已经建立了一个validation.css专门用于维护校验文件的样式

复主代码

代码如下:input.error { 테두리: 1px 단색 빨간색; }label.error {  background:url("./demo/images/unchecked.gif") 반복 없음 0px 0px;

  왼쪽 패딩: 16px;

  패딩 하단: 2px;
  글꼴 두께: 굵게;

  색상: #EA5200;

}

label.checked {

  background:url("./demo/images/checked.gif") 반복 없음 0px 0px;

}

6每个字段验证通过执行函数
성공：문자열,콜백
要验证的动작품, 如果跟一个字符当做一个css类，也可跟一个函数

复主代码

代码如下:

success: function(label) {
// IE용 텍스트로 설정
label.html(" ").addClass("checked");
//label.addClass( "valid").text("Ok!")
}

CSS 코드는 다음과 같습니다.

// 양식 재설정
$( ).ready(function() {
var 유효성 검사기 = $("#signupForm").validate({
submitHandler:function(form){
Alert("submitted");
양식. 제출하다( ;
});




8 비동기 검증remote: URL

은 검증을 위해 기본적으로 현재 검증된 값이 원격 주소에 제출됩니다. 다른 값을 제출해야 하는 경우 데이터 옵션을 사용할 수 있습니다. 🎜>

코드 복사

코드는 다음과 같습니다.

remote: "check-email.php" 원격: { url: "check-email.php", //백엔드 처리 프로그램 유형: "post", //데이터 전송 방법 dataType: "json", //수락 데이터 형식

data: { //전송할 데이터

사용자 이름: function() {
return $("#username").val(); }

}
}



원격 주소는 "true" 또는 "false"만 출력할 수 있으며 다른 출력은 없습니다

9맞춤 확인 추가
addMethod: 이름, 방법, 메시지
맞춤 확인 방법

코드 복사

코드는 다음과 같습니다.

// 한자 2바이트jQuery .validator.addMethod("byteRangeLength", function(value, element, param) { var length = value.length; for(var i = 0; i If(value.charCodeAt(i) > 127){ 길이 ;

}

}
return this.ional(element) || ( 길이 >= param[0] && length }, $.validator.format("입력한 값이 {0}~{1}바이트(한자 1문자는 2바이트로 계산)인지 확인하세요." ) );


// 우편번호 확인
jQuery.validator.addMethod("isZipCode", function(value, element) {
var tel = /^[0-9]{6}$/;
return this.ional(element) || (tel.test(value));
}, "우편번호를 정확하게 입력하세요.");

1. added-methods.js 파일이나 jquery.validate.js에 추가하려면
extra-methods.js 파일에 작성하는 것이 좋습니다

2. message_cn.js 파일에 추가: isZipCode: "한자, 영문자, 숫자, 밑줄만 포함할 수 있습니다.",

호출하기 전에 extra-methods.js 파일에 대한 참조를 추가하세요.

10라디오 확인, 체크박스 선택

1.radio 필수는 하나를 선택해야 한다는 의미입니다.

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

2. 체크박스 필수는

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

< ;input type="checkbox" class="checkbox" id="agree" name="agree" class="{required:true}" />

최소 길이 확인란은 선택해야 함을 나타냅니다. 최소 숫자, maxlength는 선택한 최대 숫자를 나타내고, rangelength:[2,3]는 선택한 숫자 범위를 나타냅니다.

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

3. 선택의 필수는 선택한 값이 비워둘 수 없음을 의미합니다

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

 
  Buga
  바가
    Oi

select의 minlength는 선택된 항목의 최소 개수(다중 선택 가능)를 나타내고, maxlength는 최대 선택된 개수를 나타내며, rangelength:[2,3]는 선택된 개수 간격을 나타냅니다.

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

Banana
Apple
  복숭아
  거북이
< ;/선택> ;