jquery 유효성 검사 양식의 기본 사용법 시작하기

1. jQuery Validate 플러그인 소개

jQuery Validate 플러그인은 양식에 대한 강력한 유효성 검사 기능을 제공하여 클라이언트 측 양식 유효성 검사를 더 쉽게 만드는 동시에 다양한 애플리케이션 요구 사항을 충족하는 다양한 사용자 정의 옵션을 제공합니다. 플러그인은 URL 및 이메일 검증을 포함한 유용한 검증 방법 세트를 번들로 제공하고 사용자 정의 방법을 작성하기 위한 API를 제공합니다. 번들로 제공되는 모든 메서드는 기본적으로 오류 메시지에 영어를 사용하며 37개 다른 언어로 번역되었습니다.

이 플러그인은 jQuery 팀의 구성원이자 jQuery UI 팀의 수석 개발자이자 QUnit의 관리자인 Jörn Zaefferer가 작성하고 유지 관리합니다.

• 공식 홈페이지: http://bassistance.de/jquery-plugins/jquery-plugin-validation/
• 온라인 문서: http://docs.jquery.com/Plugins/Validation
• 온라인 API: http://jquery.bassistance.de/api-browser/plugins.html

2. jQuery Validate 기능 소개

jQuery Validate에는 다음과 같은 기능이 있습니다.

(1) 내장된 검증 규칙

강력한 jQuery 양식 검증 플러그인은 이메일, 전화번호, URL 등의 일일 검증과 Ajax 검증에 적합하며 자체적인 풍부한 검증 규칙 외에도 사용자 정의 검증 규칙을 추가할 수도 있습니다.

IE 6+, Chrome, Firefox, Safari, Opera 10+와 호환

(2) 맞춤 확인 규칙

(3) 간단하고 강력한 정보 프롬프트.

(4) 실시간 인증: 제출 시뿐만 아니라 키업이나 블러 이벤트를 통해 인증이 실행됩니다.
3. jQuery Validate를 배우기 위한 간단한 예

이 예제의 전제는 jQuery 라이브러리와 유효성 검사 플러그인을 소개하는 것입니다.

 <script type="text/javascript" src="../../lib/jquery-1.11.1.js"></script>
 <script type="text/javascript" src="../../dist/jquery.validate.js"></script>

1. 플러그인을 사용하여 간단한 확인을 수행하세요

 
 
 <script type="text/javascript" src="../../lib/jquery-1.11.1.js"></script>
 <script type="text/javascript" src="../../dist/jquery.validate.js"></script>
 
 
 <script>
 $(document).ready(function(){
  $("#commentForm").validate();
 });
 </script>


 
 

 

 
表单验证
 
Name
 
E-Mail
 
URL
 
text
 

 
 
 

효과는 다음과 같습니다.

위 검증 설명:
1) 먼저 이 플러그인은 JQuery를 기반으로 하기 때문에 jquery-1.11.1.js를 도입해야 합니다.
2) 검증 플러그인 jquery.validate.js를 소개합니다.
3) 프롬프트 현지화 스크립트를 도입합니다. 검증 정보의 국제화를 위해 기본 검증 프롬프트는 영어입니다. 검증을 통해 작성된 국제화 파일을 가져오면 국제화가 가능합니다. 오류/정확한 메시지 표시 스타일을 변경합니다.
4) 입력창의 class 속성에 검증할 타입을 추가합니다. 다양한 필드에 대해 확인 규칙을 코딩하고 해당 필드 속성을 설정하세요

검증 가능한 규칙 유형 중 일부:  

(1)required:true 必输字段 
(2)remote:"check.shtml" 使用ajax方法调用check.shtml验证输入值 
(3)email:true 必须输入正确格式的电子邮件(只能验证格式,不保证有效性) 
(4)url:true 必须输入正确格式的网址 
(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 之间的字符串")(汉字算一个字符) 
(15)range:[5,10] 输入值必须介于 5 和 10 之间 
(16)max:5 输入值不能大于5 
(17)min:10 输入值不能小于10

5) 어떤 양식을 확인해야 하는지 결정

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

위 내용은 jquery 형식 유효성 검사에 대한 입문 학습 내용입니다. 모든 분들의 학습에 도움이 되기를 바랍니다.