jQuery 사용 소개.Validate 검증 라이브러리_jquery

jQuery.Validate 검증 라이브러리
1. jquery.validate를 다운로드합니다. 여기서는 jquery-validation-1.9.0을 제공합니다. 클릭하여 다운로드하세요.

기본 유효성 검사 규칙

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

(1) 필수: 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)범위:[5,10] 입력값은 5~10이어야 합니다
(16)최대:5 입력값은 이보다 클 수 없습니다. 5
(17)min:10 입력값은 10보다 작을 수 없습니다

기본 프롬프트

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

messages: {
필수: "이 필드는 필수입니다. ",
remote: "이 필드를 수정하세요.",
email: "유효한 이메일 주소를 입력하세요.",
url: "유효한 URL을 입력하세요.",
date: " 유효한 날짜를 입력하세요.",
dateISO: "제발 유효한 날짜(ISO)를 입력하세요.",
dateDE: "Bitte geben Sie ein gumeltiges 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} 사이의 값을 입력하세요."),
최대: $.validator.format( "{0}보다 작거나 같은 값을 입력하세요."),
min: $.validator.format("{0}보다 크거나 같은 값을 입력하세요.")
},

수정이 ​​필요한 경우 다음 js 코드를 message_cn.js로 저장하고 페이지에서 인용하세요.

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

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

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

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

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

<script><BR>$().ready(function() {<BR> $("#signupForm").validate();<BR>});<BR></script>

                                                    < ;/p>

E -Mail

< ;label for="password">Password

비밀번호 확인

 

> ;

class="{} " 메서드를 사용하려면 jquery.metadata.js 패키지를 도입해야 합니다.

다음 방법을 사용하여 프롬프트 내용을 수정할 수 있습니다

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

위 코드의 의미는 다음과 같습니다. 이름 필드에 내용이 채워지지 않은 경우 내용을 입력하세요.라는 메시지가 표시됩니다. 그렇다면 채워지는 내용의 길이가 5자 미만인 경우 사용자에게 글을 쓰라는 메시지를 어떻게 표시해야 할까요? 아래 코드를 보세요.

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

참고: equalTo 키워드를 사용할 때 다음 코드에 표시된 대로 다음 콘텐츠를 따옴표로 묶어야 합니다.

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

class="{required:true,minlength:5,equalTo :'#password'}"

다른 방법으로는 메타 키워드를 사용하는 것입니다

예를 들어 위 예시의 코드를 키워드 메타 형식으로 변경하면 코드는 다음과 같습니다.

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

> ;

<script><BR>$().ready(function() {<BR> $("#signupForm").validate({meta: "validate"});<BR>});<BR></script>

                                                   

이메일

< ;/p>

비밀번호 label>

> ;

비밀번호 확인< ;/label>

 

참고:

규칙 섹션은 다음과 같이 전체 형식을 적용합니다.

정확한 표기:

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

잘못된 쓰기:

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

다른 방법이 있습니다

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

$.metadata.setType("attr", "validate");

이렇게 하면 verify="{required"를 사용할 수 있습니다. :true}" 또는 class="required ", 하지만 class="{required:true,minlength:5}"는 작동하지 않습니다

예를 들어 위의 예제 코드를 다음과 같이 변경합니다.

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

<script><BR>$().ready(function() {<BR>  $.metadata.setType("attr", "validate");<BR>  $("#signupForm").validate ();<BR>});<BR></script>

   

        이름

 

  이메일 label>
 
 

 

  Password
 
 

 

  确认密码
 
 

   

       
   

注意：规则부분应용完整형式，即

정당법:

复代码码 代码如下:

错误写법：

复主代码 代码如下:

2、将校验规则写到代码中

复代码 代码如下:

<script><BR> $().ready(function() {<BR>  $("#signupForm").validate({<BR>    규칙:<BR>    {<BR>      이름: "필수",<BR>      이메일:<BR> {<BR>        필수: true,<BR>        이메일: true<BR>      },<BR>      비밀번호:<BR>      {<BR>        필수: true,<BR>        최소 길이: 5<BR>      },<BR>      verify_password :<BR>      {<BR>        필수: true,<BR>        최소 길이: 5,<BR>        equalTo: "#password"<BR>      }<BR>    },<BR>    메시지:<BR>    {<BR>      이름 : "请输入姓name",<BR>      이메일:<BR>      {<BR>        필수: "请输入Email地址",<BR>        이메일: "请输入正确的email地址"<BR>     },<BR>      비밀번호 :<BR>      {<BR>        필수: "请输入密码",<BR>        minlength: jQuery.format("密码不能small于{0}个字符")<BR>      },<BR>      verify_password: <BR>      { <BR>        필수: "请输入确认密码",<BR>        minlength: "确认密码不能小于5个字符",<BR>        동일: "两次输入密码不一致不一致"<BR>      }<BR>    }<BR>  });<BR>});<BR>//messages处，如果某个控件没有message，将调用默认的信息<BR></script>

   

        이름
       
   

 

  E-Mail
 
 

 

  Password
 
 

 

  确认密码
 
 

   

       
   

필수:true 必须有值

필수:"#aa:확인됨"idname称为aa의 dom被选中时，则需要验证

필수:function(){} 返回为真，表示需要验证（仅针对required有效，其它无效。)

后边两种常用于，表单中需要同时填或不填的元素

하측면针对上面 3项内容，通过实例来说明一下，更易于理解。（第一个说明：필수 : true 상단의 示例 ，已经不常清楚。)

필수:"#aa:checked" 的示例如下：

复主代码 代码如下:

<script><BR> $().ready(function() {<BR>  $("#signupForm").validate({<BR>    규칙:<BR>    {<BR>      이름: "필수",<BR>      이메일:<BR> {<BR>        필수: "#open:checked",<BR>        이메일: true<BR>      }<BR>    },<BR>    메시지:<BR>    {<BR>      이름: "请输入姓name",<BR>      이메일:<BR>      {<BR>        필수: "请输入Email地址",<BR>        이메일: "请输入正确的email地址"<BR>      }<BR>    }<BR> } );<BR>} );<BR>//messages处，如果某个控件没有message，将调用默认的信息<BR></script>

   

        开关：
       
       
       
        关闭
   

   

      E-Mail
     
   

   

       
   

> ;

当选中“打开”时，则对email进行验证。

필수:function(){}적示例如下：

复代码 代码如下:

<script><BR> $().ready(function() {<BR>  $("#signupForm").validate({<BR>    규칙:<BR>    {<BR>      이름: "필수",<BR>      이메일:<BR> {<BR>        필수: function()<BR>        {<BR>          return true;<BR>        },<BR>        이메일: function()<BR>        {<BR>          return false;<BR>        }<BR>      } <BR>    },<BR>    메시지:<BR>    {<BR>      이름: "请输入姓name",<BR>      이메일:<BR>      {<BR>        필수: "请输入Email地址",<BR>        이메일 : "请输入正确的email地址"<BR>      }<BR>    }<BR>  });<BR>});<BR>//messages处，如果某个控件没有message，将调用默认的信息<BR></script>

   

        开关：
       
        打开
       
        关闭
   

   

      E-Mail
     
   

   

        < ;input class="submit" type="submit" value="Submit"/>
   

经过测试得知，即使email:function(){return false}); 是返回false, 但是required:function(){return true;}, 是返回true, 那么, 除了验证是否为외공, 还验证email格式。也就是说email:function(){reuturn false;}设置无效。进一步测试，去掉required:function(){return true;}，只保留：email:function(){reuturn false;}，仍然验证email格式。代码如下：

复aze代码 代码如下:

  $("#signupForm").validate({
    규칙:
    {
      이름: "필수",
      이메일:
      {
        이메일: function()
        {
          return false;
        }
      }
    },
    메시지:
    ......

注意:将校验规则单独写在文件中，如face例子中的rules规则中的firstname，email等，问题是，input中有id, 又有name属性, 那JQuery Validation获取哪个呢? 일반적으로 过测试, 是获取name属性. 정정义样式代码

复代码 代码如下:

/* jQuery.Validate css */
input.error{border: 1px dotted red;}
label.error{
  background-image:url('del.gif');
  background-repeat:no-repeat;
  왼쪽 여백: 18px;
  색상: 빨간색;
}


input.error는 입력 컨트롤의 스타일을 정의합니다

label.error는 오류 메시지의 스타일을 정의합니다

아래와 같습니다: