jquery.validate.js 양식 유효성 검사 플러그인_jquery를 사용하는 방법을 빠르게 알아보세요.

JavaScript를 사용하는 가장 일반적인 경우는 양식 유효성 검사이며, 우수한 JavaScript 라이브러리인 jQuery는 뛰어난 양식 유효성 검사 플러그인----Validation도 제공합니다. 유효성 검사는 가장 오래된 jQuery 플러그인 중 하나이며 전 세계의 다양한 프로젝트에서 검증되었으며 많은 웹 개발자로부터 칭찬을 받았습니다. Validation은 표준 검증 방법 라이브러리로서 다음과 같은 특징을 가지고 있습니다.

• 1. 내장된 검증 규칙: 필수, 숫자, 이메일, URL, 신용카드 번호 등 19가지 유형의 검증 규칙이 내장되어 있습니다
• 2. 맞춤형 검증 규칙: 검증 규칙을 쉽게 맞춤화할 수 있습니다.
• 3. 간편하고 강력한 인증 정보 프롬프트: 인증 정보 프롬프트가 기본으로 제공되며, 기본 프롬프트 정보를 사용자 정의하는 기능을 제공합니다
• 4. 실시간 인증: 양식을 제출할 때뿐만 아니라 키업이나 블러 이벤트를 통해 인증이 실행될 수도 있습니다.

사용법:
1. jQuery 라이브러리 및 유효성 검사 플러그인 소개

<script src="scripts/jquery-1.6.4.js" type="text/javascript"></script> 
<script src="scripts/jquery.validate.js" type="text/javascript"></script> 

2. 확인해야 할 양식을 결정합니다.

<script type="text/javascript"> 
////<![CDATA[ 
$(document).ready(function(){ 
  $("#commentForm").validate(); 
}); 
//]]> 
</script> 

3. 다양한 필드에 대한 확인 규칙을 인코딩하고 필드의 해당 속성을 설정합니다

class="required"  必须填写 
class="required email"    必须填写且内容符合Email格式验证 
class="url"       符合URL格式验证 
minlength="2"   最小长度为2 

검증 가능한 규칙에는 19가지 유형이 있습니다.
필수: 필수 항목
remote:     "이 필드를 수정해 주세요.",
이메일:                                                                                                                        url: URL 확인
날짜: 날짜 확인 dateISO: 날짜(ISO) 확인
날짜DE:
번호: 번호 확인
번호DE:
숫자:                                                                                                                                                                        
신용카드:
신용카드 번호 확인
equalTo: “같은 값을 다시 입력해주세요” 확인
수락:  법적 접미사 이름을 사용한 문자열 확인
최대 길이/최소 길이: 최대/최소 길이 확인
rangelength: 문자열 길이 범위 확인
범위:                                                                                                                        최대/최소:                                                                   또 다른 검증 방법 (쉽게 관리할 수 있도록 검증 관련 정보를 모두 클래스 속성에 기재)
1) 새로운 jQuery 플러그인 소개
---jquery.metadata.js(고정 형식 구문 분석을 지원하는 jQuery 플러그인)

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

2) 이라는 확인 방법을 변경합니다.

3) 클래스 속성에 모든 확인 규칙을 작성합니다

<script type="text/javascript"> 
////<![CDATA[ 
$(document).ready(function(){ 
  //将$("#commentForm").validate(); 改成 
  $("#commentForm").validate({meta: "validate"}); 
}); 
//]]> 
</script> 

이름 속성을 사용하여 필드와 확인 규칙을 연결할 수도 있습니다(확인 동작은 HTML 구조에서 완전히 분리됩니다).

class="{validate:{required: true, minlength: 2, messages:{required:'请输入姓名', minlength:'请至少输入两个字符'}}}" 
class="{validate:{required: true, email: true, messages:{required:'请输入电子邮件', email:'请检查电子邮件的格式'}}}"    

국제화

Validation 플러그인의 검증 정보 기본 언어는 영어입니다. 중국어로 변경하려면 Validation에서 제공하는 중국어 검증 정보만 가져오면 됩니다.

$("#commentForm").validate({ 
  rules: { 
   username: { 
     required: true, 
     minlength: 2 
   }, 
   email: { 
     required: true, 
     email: true 
   }, 
   url:"url", 
   comment: "required" 
  }, 
  messages: { 
   username: { 
     required: '请输入姓名', 
     minlength: '请至少输入两个字符' 
   }, 
   email: { 
     required: '请输入电子邮件', 
     email: '请检查电子邮件的格式' 
   }, 
   url: '请检查网址的格式', 
   comment: '请输入您的评论' 
  } 
}); 

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

인증 정보를 맞춤화하고 아름답게 꾸미세요

사용자 정의 유효성 검사 규칙

errorElement: "em",        //可以用其他标签，记住把样式也对应修改 
success: function(label) {  //label指向上面那个错误提示信息标签em 
   label.text("")            //清空错误提示消息 
       .addClass("success");  //加上自定义的success类 
   } 
在CSS中添加样式与之关联 
em.error { 
   background:url("images/unchecked.gif") no-repeat 0px 0px; 
   padding-left: 16px; 
} 
em.success { 
   background:url("images/checked.gif") no-repeat 0px 0px; 
   padding-left: 16px; 
} 

위는 양식 유효성 검사 플러그인 jquery.validate.js에 대한 자세한 소개입니다. 모든 분들의 학습에 도움이 되기를 바랍니다.