jQuery 유효성 검사 양식 유효성 검사 플러그인은 attribute_jquery 클래스 형식으로 유효성 검사를 추가합니다.-JS 튜토리얼-php.cn

집

웹 프론트엔드

JS 튜토리얼

jQuery 유효성 검사 양식 유효성 검사 플러그인은 attribute_jquery 클래스 형식으로 유효성 검사를 추가합니다.

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

May 16, 2016 pm 03:19 PM

jqueryvalidate양식 유효성 검사

본 글의 예시에서는 클래스 속성 형태로 검증을 추가하는 jQuery Validate 폼 검증 플러그인을 소개하고 있으며, 참고용으로 모두와 공유하고 있습니다.
효과는 다음과 같습니다.

1. jQuery 폼 검증 플러그인, 클래스 속성 형태로 검증 추가

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery表单验证插件----添加class属性形式的校验</title>
 <script src="../../scripts/jquery-1.3.1.js" type="text/javascript"></script>
 <script src="lib/jquery.validate.js" type="text/javascript"></script>
<style type="text/css">
* { font-family: Verdana; font-size: 96%; }
label { width: 10em; float: left; }
label.error { float: none; color: red; padding-left: .5em; vertical-align: top; }
p { clear: both; }
.submit { margin-left: 12em; }
em { font-weight: bold; padding-right: 1em; vertical-align: top; }
</style>
 <script type="text/javascript">
 $(document).ready(function(){
  $("#commentForm").validate();
 });
 </script>
 
</head>
<body>
 

 <form class="cmxform" id="commentForm" method="get" action="">
 <fieldset>
  <legend>jQuery表单验证插件----添加class属性形式的校验</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" value="" />
  </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>
 </fieldset>
 </form>
</body>
</html>

2. 기본 규칙
기본 확인 규칙:

(1)필수:true 필수 항목
(2)remote:"check.php" ajax 메소드를 사용하여 check.php를 호출하여 입력값을 확인합니다
(3)email:true 이메일을 올바른 형식으로 입력해야 합니다
(4)url:true URL을 올바른 형식으로 입력해야 합니다
(5)date:true 날짜를 올바른 형식으로 입력해야 합니다(ie6). 주의해서 사용하세요.
(6)dateISO:true 올바른 형식으로 날짜(ISO)를 입력해야 합니다. 예: 2009-06-23, 1998/01/22 형식만 확인되며 형식은 확인되지 않습니다. 유효성
(7)number:true 유효한 숫자(음수, 소수)를 입력해야 합니다
(8)digits:true 정수를 입력해야 합니다
(9)신용카드: 적법한 신용카드 번호를 입력해야 합니다
(10)equalTo:"#field" 입력 값은 #field와 동일해야 합니다
(12)maxlength:5 최대 5자 이내의 문자열을 입력하세요(한자는 1자로 계산됩니다)
(13)minlength:10 최소 길이가 10자 이상인 문자열을 입력하세요(한자는 한 글자로 계산됩니다)
(14)rangelength:[5,10] 입력 길이는 5~10" 사이의 문자열이어야 합니다. (한자는 1자로 계산됩니다.)
(15)range:[5,10] 입력값은 5~10 사이여야 합니다
(16)최대:5
(17)min:10 입력값은 10 이상이어야 합니다
기본 프롬프트: