vaidate 플러그 인 사용

js 도입

< p > 사용: < / p >
< p > (1) 컨트롤 속성 방식 < / p >

   

계 정: < input class = "required" minlength = "2" type = "text" name = "user" value = "/ > < / p > < br / >   

메 일 박스: < input class = "required email" type = "text" name = "email" value = "/ > < / p > < br / >    <입력 type = "submit" value = "제출" / > < br / >

< p > (2) JS 키 값 대 전 삼 방식 < br / > < / p >

$(function(){
                $("#f1").validate(
                    {
                    /*
                     * 폼 검사, 두 가지 요소: < br / >                     *  검사 규칙 < br / >                     *  대응 하 는 힌트 < br / >                     *
                     */
                    //규칙 부분 < br / >                    rules:{
                        //계 정 검사 < br / >                        username:{
                            //계 정의 검사 규칙 < br / >                            required:true
                        }
                    },
                    //오류 알림 부분 < br / >                    messages:{
                        //계 정 오류 알림 < br / >                        username:{
                            필수: "계 정 필수" < br / >                        }
                    }
                });
            });

< p > 검사 규칙: < / p >



< th > 규칙 명 < / th >
< th > 설명 < / th >





< td > 필드 를 입력 해 야 합 니 다 < / td >



< td > 올 바른 형식의 이메일 을 입력 해 야 합 니 다 < / td >



< td > 정확 한 형식의 인터넷 주 소 를 입력 해 야 합 니 다 < / td >



< td > 정확 한 형식의 날 짜 를 입력 해 야 합 니 다 (IE6 인증 오류) < / td >



< td > 정확 한 형식의 날짜 (ISO) 를 입력 해 야 합 니 다 (형식 만 검증 하고 유효 하지 않 음) < / td >



< td > 합 법 적 인 숫자 (음수, 소수) 를 입력 해 야 합 니 다 < / td >



< td > 정수 < / td > 를 입력 해 야 합 니 다.



< td > 는 반드시 합 법 적 인 신용카드 번 호 를 입력 해 야 합 니 다. 예 를 들 어 510510510510510510510510500 < / td >



< td > 입력 값 은 \ # field 와 같 아야 합 니 다.        equalTo:"input[name='pwd']"



< td > 입력 길이 가 최소 5 인 문자열 (한 자 는 한 글자 로 계산) < / td >



< td > 입력 길이 가 최대 10 인 문자열 (한 자 는 한 글자 로 계산) < / td >



< td > 길이 가 5 와 10 사이 인 문자열 을 입력 하 십시오. (한 자 는 한 글자 로 계산 합 니 다) < / td >



< td > 입력 값 은 5 와 10 사이 에 있어 야 합 니 다 < / td >



< td > 입력 값 은 5 < / td > 보다 작 으 면 안 됩 니 다.



< td > 입력 값 은 10 < / td > 보다 크 면 안 됩 니 다.



< td > ajax 방법 으로 check. php 를 호출 하여 입력 값 을 검증 합 니 다 < / td >

required:true
email:true
url:true
date:true
dateISO:true
number:true
digits:true
creditcard:true
equalTo:”#field”
minlength:5
maxlength:10
rangelength:[5,10]
range:[5,10]
min:5
max:10
remote:”check.php”

< p > 디 버 깅 모드 오픈 시 제출 금지 < / p >
< p > 우리 가 디 버 깅 을 할 때, 페이지 가 이동 하지 않 고 검증 할 수 있 는 지 검사 하기 만 하면, 디 버 깅 모드 를 열 어 제출 을 금지 할 수 있 습 니 다 < / p >

$('#reg').validate({
    debug : true,

});

< p > 폼 제출 을 막 아야 할 때 프로그램 을 실행 해 야 합 니 다. 기본 제출 대신 다른 방식 을 설정 할 수 있 습 니 다 < / p >

$('#reg').validate({
    submitHandler : function(){
    // some action
    },
});

< p > 설정 성공 후 불 러 오 는 스타일 < / p >
< p > Validate. js 플러그 인 에 내 장 된 인증 에 성공 한 스타일 은 "valid" 입 니 다. CSS 스타일 에서 valid 스타일 을 사용자 정의 할 수 있 습 니 다: < / p >

.valid{
        background: url(right.png) no-repeat right;
        background-size: auto 100%;
        border: 2px solid green;
    }

< p > 물론 인증 알림 메 시 지 를 수정 할 수도 있 습 니 다. 탭 의 스타일 을 사용자 정의 하고 텍스트 설명 을 추가 할 수 있 습 니 다. < / p >

success : function(label){
        label.addClass('labelStyle').text('ok');

        },

< p > 잘못된 요 소 를 강조 합 니 다 < / p >

highlight : function(element,errorClass){
     $(element).css('border','3px solid red');

     },

< p > 입력 이 성공 하면 하 이 라이트 디 스 플레이 오 류 를 취소 해 야 합 니 다. unhighlight: < / p >

    unhighlight : function(element,errorClass){
         $(element).css('border','1px solid green');

         }

< h3 id = "4 - remote 비동기 검증" > remote 비동기 검증 < / h3 > remote: url, 폼 을 ajax 검증 할 수 있 습 니 다. 기본적으로 현재 검 증 된 값 을 원 격 주소 로 제출 합 니 다. 예 를 들 어 우리 가 등록 할 때 배경 서버 를 통 해 이 계 정 이 등록 되 었 는 지 검증 해 야 합 니 다. 이때 ajax 를 사용 해 야 합 니 다. 구체 적 인 사용 방법 은 아래 를 참조 하 십시오.

rules : {
        user : {
                required : true,
                rangelength:[3,5],
                remote : 'user.php',
                }
                },          
 
messages : {
        user : {
                required: '계 정 이 비어 있 으 면 안 됩 니 다!'   
                rangelength: '계 정 길 이 는 {0} - {1} 비트 사이!', < br / >                remote: '계 정 이 점용 되 었 습 니 다', < br / >                },

                },

< p > vaidation 은 잘못된 알림 의 < br / > < / p > 를 어떻게 표시 합 니까?
< p > 1, 오류 알림 은 vaidation 이 스스로 추가 한 < br / > 2, 어떻게 추가 하 는 지, 현재 입력 항목 뒤에 label 태그 가 < br / > 3 을 추가 하고 설정 한 두 가지 속성: < br / >             class = "error"

             for = "입력 항목 의 name 값" < / p >
< p > 잘못된 알림 의 스타일 을 CSS 로 수정 할 수 있 습 니 다 < br / > < / p >

          label 태그 나 error 이 class < / p > 를 사용 합 니 다.

label {
                color: red;
            }
            .error {
                color: red;

            }

< p > 오류 알림 을 입력 항목 뒤에 줄 바 꾸 기 < / p >
< p > 오류 탭 의 위 치 를 사용자 정의 할 수 있 습 니 다 < br / > < / p >
< p > label 탭 을 사용 합 니 다. 속성 class = "error" for = "name 값" < / p >

< p > 사용자 정의 형식 < br / > $. vaidator. addMethod ("형식 이름 검사", function (value) {< br / > < / p >
< p > 이 검사 의 알고리즘 구현   });

< p > < br / > vaidate 함수 에서 사용, 문법 사용 은 내 장 된 검사 유형 과 같 습 니 다 < br / > < / p >