지역 사회 배우다 도구 라이브러리 여가
찾다
한국어
집 > 웹 프론트엔드 > JS 튜토리얼 > jQuery 유효성 검사 플러그인 Validate_jquery에 대한 자세한 설명

jQuery 유효성 검사 플러그인 Validate_jquery에 대한 자세한 설명

PHP中文网
풀어 주다： 2016-05-16 16:31:03
원래의
1237명이 탐색했습니다.

validate는 강력한 유효성 검사 기능을 제공하여 클라이언트 양식 유효성 검사를 더 쉽게 해주는 훌륭한 jq 플러그인입니다. 또한 다양한 애플리케이션 요구 사항을 충족할 수 있는 다양한 사용자 정의 옵션도 제공합니다. 플러그인은 URL 및 이메일 검증을 포함한 유용한 검증 방법 세트를 번들로 제공하고 사용자 정의 방법을 작성하기 위한 API를 제공합니다.

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

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

validate.js 다운로드 주소: http://plugins.jquery.com/project/validate
metadata.js 다운로드 주소: http://plugins.jquery.com/project/metadata 사용법:


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种：
[javascript] view plaincopyprint?
required:      必选字段  
remote:        "请修正该字段",  
email:         电子邮件验证  
url:           网址验证  
date:          日期验证  
dateISO:       日期 (ISO)验证  
dateDE:  
number:        数字验证  
numberDE:  
digits:        只能输入整数  
creditcard:    信用卡号验证  
equalTo:       ”请再次输入相同的值“验证  
accept:        拥有合法后缀名的字符串验证  
maxlength/minlength:    最大/最小长度验证  
rangelength:     字符串长度范围验证  
range:           数字范围验证  
max/min:         最大值/最小值验证
로그인 후 복사

을 도입해야 합니다. js

코드는 다음과 같습니다. 

<script type="text/javascript" src="../../scripts/jquery-1.3.1.js"></script>
<script type="text/javascript" src="lib/jquery.validate.js"></script>
로그인 후 복사

초기화된 HTML

코드는 다음과 같습니다. 

<script type="text/javascript">
$(function(){
　$("#commentForm").validate() 
})
</script>
<form class="cmxform" id="commentForm" method="get" action="">
 <fieldset>
   <legend>一个简单的validate验证带验证提示的评论例子</legend>
   <p>
     <label for="cusername">姓名</label>
     <em>*</em><input id="cusername" name="username" size="25" class="required" minlength="2" />
   </p>
   <p>
     <label for="cemail">电子邮件</label>
     <em>*</em><input id="cemail" name="email" size="25" class="required email"  />
   </p>
   <p>
     <label for="curl">网址</label>
     <em>  </em><input id="curl" name="url" size="25" class="url" />
   </p>
   <p>
     <label for="ccomment">你的评论</label>
     <em>*</em><textarea id="ccomment" name="comment" cols="22" class="required" ></textarea>
   </p>
 <p>
     <input class="submit" type="submit" value="提交"/>
   </p>
로그인 후 복사
먼저 기본 설정 사양을 살펴보세요

직렬 숫자

규칙
序号规则描述
1required:true必须输入的字段。
2remote:"check.php"使用 ajax 方法调用 check.php 验证输入值。
3email:true必须输入正确格式的电子邮件。
4url:true必须输入正确格式的网址。
5date:true必须输入正确格式的日期。日期校验 ie6 出错，慎用。
6dateISO:true必须输入正确格式的日期（ISO），例如：2009-06-23，1998/01/22。只验证格式，不验证有效性。
7number:true必须输入合法的数字（负数，小数）。
8digits:true必须输入整数。
9creditcard:必须输入合法的信用卡号。
10equalTo:"#field"输入值必须和 #field 相同。
11accept:输入拥有合法后缀名的字符串（上传文件的后缀）。
12maxlength:5输入长度最多是 5 的字符串（汉字算一个字符）。
13minlength:10输入长度最小是 10 的字符串（汉字算一个字符）。
14rangelength:[5,10]输入长度必须介于 5 和 10 之间的字符串（汉字算一个字符）。
15range:[5,10]输入值必须介于 5 和 10 之间。
16max:5输入值不能大于 5。
17min:10输入值不能小于 10。
< span style="Background-color: rgb(255,255,255)">설명<🎜>
1필수:true 반드시 입력해야 하는 필드입니다.
2remote:"check.php"Ajax 메소드를 사용하여 check.php를 호출하여 입력 값을 확인합니다. .
3email:true올바른 형식의 이메일을 입력해야 합니다.
4url:trueURL을 올바른 형식으로 입력해야 합니다.
5date:true날짜를 올바른 형식으로 입력해야 합니다. 날짜 확인(ie6 오류), 주의해서 사용하세요.
6dateISO:true날짜(ISO)를 올바른 형식으로 입력해야 합니다. 예: 2009- 1998년 1월 22일 06-23일. 유효성은 확인되지 않고 형식만 확인됩니다.
7number:true법적 숫자(음수, 소수점 이하 자릿수)를 입력해야 합니다.
8숫자:true정수를 입력해야 합니다.
9신용카드:유효한 신용카드 번호를 입력해야 합니다.
10equalTo:"#field"입력 값은 #field와 동일해야 합니다.
11accept:적법한 접미사(업로드된 파일의 접미사)가 포함된 문자열을 입력하세요.
12maxlength:5최대 길이가 5인 문자열을 입력하세요(한자는 1자로 계산됩니다).
13최소 길이:10최소 길이가 10자(한자는 1자로 계산)의 문자열을 입력하세요.
14rangelength:[5,10]입력 길이는 5에서 10 사이여야 합니다(한자는 다음과 같이 계산됩니다). 한 문자).
15범위:[5,10]입력 값은 5에서 10 사이여야 합니다.
16max:5입력 값은 5보다 클 수 없습니다.
17최소:10입력 값은 10보다 작을 수 없습니다.

required表示必须填写的

email表示必须正确的邮箱

把验证的规格写在HTML内的class内，方法欠妥，后期的维护增加成本，没有实现行为与结构的分离

所以，可以想把HTML内的class都清空，如下:

代码如下:

<form class="cmxform" id="commentForm" method="get" action="">
 <fieldset>
   <legend>一个简单的validate验证带验证提示的评论例子</legend>
   <p>
     <label for="cusername">姓名</label>
     <em>*</em><input id="cusername" name="username" size="25" />
   </p>
   <p>
     <label for="cemail">电子邮件</label>
     <em>*</em><input id="cemail" name="email" size="25"  />
   </p>
   <p>
     <label for="curl">网址</label>
     <em>  </em><input id="curl" name="url" size="25" />
   </p>
   <p>
     <label for="ccomment">你的评论</label>
     <em>*</em><textarea id="ccomment" name="comment" cols="22" ></textarea>
   </p>
 <p>
     <input class="submit" type="submit" value="提交"/>
   </p>
로그인 후 복사

js

代码如下:

 $(document).ready(function(){
    $("#commentForm").validate({
      rules:{
        username:{
          required:true,
          minlength:2
        },
        email:{
          required:true,
          email:true
        },
        url:"url",
        comment:"required",
        valcode: {
          formula: "7+9"  
        }
      }
    });
  });
  </script>
로그인 후 복사

因为默认的提示是英文的，可以改写成

代码如下:

jQuery.extend(jQuery.validator.messages, {
        required: "必选字段",
        remote: "请修正该字段",
        email: "请输入正确格式的电子邮件",
        url: "请输入合法的网址",
        date: "请输入合法的日期",
        dateISO: "请输入合法的日期 (ISO).",
        number: "请输入合法的数字",
        digits: "只能输入整数",
        creditcard: "请输入合法的信用卡号",
        equalTo: "请再次输入相同的值",
        accept: "请输入拥有合法后缀名的字符串",
        maxlength: jQuery.format("请输入一个长度最多是 {0} 的字符串"),
        minlength: jQuery.format("请输入一个长度最少是 {0} 的字符串"),
        rangelength: jQuery.format("请输入一个长度介于 {0} 和 {1} 之间的字符串"),
        range: jQuery.format("请输入一个介于 {0} 和 {1} 之间的值"),
        max: jQuery.format("请输入一个最大为 {0} 的值"),
        min: jQuery.format("请输入一个最小为 {0} 的值")
});
로그인 후 복사

建议新建一个js,放到validate.js 下面.

关于提示的美化

代码如下:

errorElement:"em"
로그인 후 복사

　　创建一个标签，可以自定义

代码如下:

success:function(label){
        label.text(" ").addClass(&#39;success&#39;)
      }
로그인 후 복사

这里的参数label是指向创建的标签，这里也就是”em“ 然后情况自己的内容，在加上自己的class就可以了

完整的js

代码如下:

  $("#commentForm").validate({
      rules:{
        username:{
          required:true,
          minlength:2
        },
        email:{
          required:true,
          email:true
        },
        url:"url",
        comment:"required",
      },
      errorElement:"em",
      success:function(label){
        label.text(" ").addClass(&#39;success&#39;)
      }
    });
로그인 후 복사

相对应的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;
}
로그인 후 복사

.success放到.error下面。。。唔唔。。具体的情况。。只可体会不可言会。。唔。。

在做项目的过程中千变万化，有时候要满足不同的需求，validate也可以单独的修改验证的信息。。

例如：

代码如下:

  messages:{
        username:{
          required:"主人,我要填的满满的",
          minlength:"哎唷,长度不够耶"
        }
   }
로그인 후 복사

完整的js

代码如下:

 $("#commentForm").validate({
      rules:{
        username:{
          required:true,
          minlength:2
        },
        email:{
          required:true,
          email:true
        },
        url:"url",
        comment:"required",
        valcode: {
          formula: "7+9"  
        }
      },
      messages:{
        username:{
          required:"主人,我要填的满满的",
          minlength:"哎唷,长度不够耶"
        }
      },
      errorElement:"em",
      success:function(label){
        label.text(" ").addClass(&#39;success&#39;)
      }
    });
로그인 후 복사

这里就可以啦。

关于自定义验证规则

增加一段HTML代码

代码如下:

 <p>
     <label for="cvalcode">验证码</label>
     <input id="valcode" name="valcode"  />=7+9
   </p>
로그인 후 복사

自定一个规则

代码如下:

$.validator.addMethod("formula",function(value,element,param){
      return value==eval(param)
    },"请正确输入验证信息");
로그인 후 복사

formula是需要验证方法的名字 好比如required 必须的。
value返回的当前input的value值
param返回的是当前自定义的验证格式 好比如：7+9
在试用了eval方法 让字符串相加

完整的js

代码如下:

$.validator.addMethod("formula",function(value,element,param){
      return value==eval(param)
    },"请正确输入验证信息");
    $("#commentForm").validate({
      rules:{
        username:{
          required:true,
          minlength:2
        },
        email:{
          required:true,
          email:true
        },
        url:"url",
        comment:"required",
        valcode: {
          formula: "7+9"  
        }
      },
      messages:{
        username:{
          required:"主人,我要填的满满的",
          minlength:"哎唷,长度不够耶"
        }
      },
      errorElement:"em",
      success:function(label){
        label.text(" ").addClass(&#39;success&#39;)
      }
    });
로그인 후 복사

完

관련 라벨：
jquery validate
원천：php.cn
이전 기사：일반적인 JavaScript 배열 작업 기술 요약_javascript 기술 다음 기사：jquery는 맨 위로 복귀 function_jquery를 구현합니다.
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
저자별 최신 기사
최신 이슈
Javascript/Jquery를 사용하여 버튼 없이 양식 제출 JavaScript 함수를 호출하고 JQUERY/PHP를 사용하여 양식을 실행하여 버튼 없이 양식을 제출하려고 합니다. 페이지를 다시 로드하지 않고 백엔드에서 양...
에서 2024-04-06 14:54:03
0
2
421
jquery를 사용하여 HTML 데이터 테이블에서 선택되지 않은 행의 값을 검색하는 방법 버튼을 클릭하지 않은 모든 행의 값을 얻으려고합니다. 예를 들어, 첫 번째 행의 버튼을 클릭했을 때 클릭되지 않은 행의 값을 검색하고 싶습니다. vartable=...
에서 2024-04-05 09:26:49
0
1
1418
최종 사용자의 현재 선택에 따라 선택 상자에서 선택한 옵션을 이동하려면 jquery 스크립트가 필요합니다. 최종 사용자가 선택 상자 요소를 통해 항목의 순위를 지정할 수 있는 HTML 페이지가 있습니다. 간단한 데모를 보려면 바이올린을 참조하세요: https://jsf...
에서 2024-04-04 18:40:04
0
1
3528
북마크를 통해 순수 CSS로 요소를 만들었습니다. 생성되었으나 표시되지 않음 내 코드는 다음과 같습니다: g=document.createElement('div');g.setAttribute("id","divcon...
에서 2024-04-04 17:27:27
0
1
417
Safari/Firefox iOS에서 양식 데이터를 보낼 수 없습니다. 이는 iOS의 Safari/Firefox를 제외한 모든 플랫폼에서 작동합니다: jQuery("#gform_1").one('submit',func...
에서 2024-04-04 12:53:48
0
1
303
관련 주제
더>
인기 추천
인기 튜토리얼
더>
관련 튜토리얼
인기 추천
최신 강좌
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿