JQurey 유효성 검사 양식 검증_jquery 사용에 대한 자세한 설명

은 클라이언트 양식의 유효성을 검사할 수 있고 확장성이 뛰어난 다양한 사용자 정의 가능한 속성과 메서드를 제공하는 탁월한 플러그인입니다. 본 글은 이러한 예시를 설명함으로써 Validation의 적용을 이해하기 위한 글이다.

이 예와 관련된 확인 사항은 다음과 같습니다.

사용자 이름: 길이, 문자 확인, 반복성 Ajax 확인(이미 존재하는지 여부).

비밀번호: 길이 확인, 비밀번호 반복 확인.

메일: 이메일 주소 확인.

유선전화: 중국 본토 유선전화 번호 확인.

휴대폰번호: 중국 본토 휴대폰번호 인증입니다.

웹 주소: 웹사이트 URL 주소 확인.

날짜: 표준 날짜 형식 확인.

숫자: 정수, 양의 정수 확인, 숫자 범위 확인.

신분증: 중국 본토 신분증 번호 확인.

우편번호: 본토 우편번호 확인입니다.

파일 : 파일 형식(접미사) 확인, 예를 들어 이미지만 업로드가 허용됩니다.

IP: IP 주소 확인.

인증코드: 인증코드 ajax 인증입니다.

사용방법:

1. jquery 및 jquery.validate 플러그인 준비

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

2. CSS 스타일 준비

페이지 스타일에 대해서는 자세히 설명하지 않겠습니다. 자신만의 스타일을 작성하거나 DEMO 페이지 소스 코드를 참조할 수 있습니다. 여기서 강조할 핵심 스타일은 인증 정보를 표시하는 스타일입니다

label.error{color:#ea5200; margin-left:4px; padding:0px 20px; 
background:url(images/unchecked.gif) no-repeat 2px 0 } 
label.right{margin-left:4px; padding-left:20px; background: 
url(images/checked.gif) no-repeat 2px 0} 

3.XHTML

<form id="myform" action="#" method="post"> 
<table width="100%" border="0" cellspacing="0" cellpadding="0" class="mytable"> 
 <tr class="table_title"> 
  <td colspan="2">jquery.validation 表单验证</td> 
 </tr> 
 <tr> 
  <td width="22%" align="right">用户名：</td> 
  <td><input type="text" name="user" id="user" class="input required" /> 
  <p>用户名为3-16个字符，可以为数字、字母、下划线以及中文</p></td> 
 </tr> 
 <tr> 
  <td align="right">密码：</td> 
  <td><input type="password" name="pass" id="pass" class="input required" /> 
  <p>最小长度:6 最大长度:16</p> 
  </td> 
 </tr> 
 <tr> 
  <td align="right">确认密码：</td> 
  <td><input type="password" name="repass" class="input required" /></td> 
 </tr> 
</table> 
</form>

공간 제한으로 인해 이 기사에서는 예제의 HTML 코드 중 일부만 발췌했습니다. 자세한 XHTML 코드는 DEMO 소스 코드 페이지를 참조하세요. 레이블에 "필수" 클래스 스타일을 부여했다는 점은 언급할 가치가 있으며, 그 역할은 아래에서 언급할 것입니다.

4. 유효성 검사 플러그인 적용

검증 플러그인 호출 방법:

$(function(){    
  var validate = $("#myform").validate({ 
     rules:{ //定义验证规则 
      ...... 
     }, 
     messages:{ //定义提示信息 
      ...... 
     } 
  }) 
}); 

규칙: 키:값 형식으로 확인 규칙을 정의합니다. 키는 확인할 요소이고 값은 문자열 또는 객체일 수 있습니다. 예를 들어 사용자 이름의 길이를 확인하고 비워 두지 마십시오.

rules:{ 
 user:{ 
   required:true, 
   maxlength:16, 
   minlength:3 
 }, 
 ...... 
} 

사실 XHTML 코드에서 필요에 따라 입력의 클래스 속성을 직접 지정할 수 있는데, 공백을 허용하지 않기 때문에 JS 부분에서 반복해서 작성할 필요가 없습니다. 이메일 등의 확인 방법과 동일하게 입력의 클래스 속성을 이메일로 직접 설정합니다.

메시지: 키:값 형식으로 프롬프트 메시지를 정의합니다. 키는 확인할 요소이고, 값은 문자열 또는 함수입니다. 확인이 실패하면 메시지가 표시됩니다.

messages:{ 
 user:{ 
   required:"用户名不能为空！", 
   remote:"该用户名已存在，请换个其他的用户名！" 
 }, 
 ...... 
} 

이 예제에 포함된 검증 JS는 위의 규칙에 따라 작성되었습니다. 검증 플러그인은 다음과 같은 다양한 기본 검증 방법을 캡슐화합니다.

필수:true는 값이 있어야 하며 비워둘 수 없습니다

remote:url을 사용하면 사용자 이름이 이미 존재하는지 확인할 수 있습니다. 서버는 true를 출력하여 확인이 통과되었음을 나타냅니다.

minlength:6 최소 길이는 6입니다

최대 길이:16 최대 길이는 16입니다

rangelength: 길이 범위

범위:[10,20] 값 범위는 10-20입니다

이메일:진짜 확인 이메일

url:true 인증 URL

dateISO:true 날짜 형식 'yyyy-mm-dd' 확인

digits:true는 숫자만 가능합니다

accept:'gif|jpg' gif 또는 jpg 접미사가 있는 사진만 허용됩니다. 파일을 확인하는 데 일반적으로 사용되는 확장자

equalTo:'#pass'는 양식 필드 값과 동일하며 종종 반복되는 비밀번호 입력을 확인하는 데 사용됩니다

또한 프로젝트의 실제 상황을 기반으로 여러 검증을 확장했습니다. 검증 코드는 사용하기 전에 이 JS를 로드해야 합니다. 다음과 같은 검증을 제공합니다:

userName:true 사용자 이름은 한자, 영문자, 숫자, 밑줄만 포함할 수 있습니다

isMobile:진짜 휴대폰번호 인증

isPhone:본토 휴대폰 번호 인증

isZipCode:진짜 우편번호 확인

isIdCardNo:true 중국 본토 ID 번호 확인

ip:실제 IP 주소 확인

위에 제공된 확인 방법은 기본적으로 대부분의 프로젝트에서 우리의 요구 사항을 충족합니다. 그 밖에 특별한 검증 요구사항이 있는 경우 다음과 같이 확장할 수 있습니다.

jQuery.validator.addMethod("isZipCode", function(value, element) {   
 var zip = /^[0-9]{6}$/;   
 return this.optional(element) || (zip.test(value));   
}, "请正确填写您的邮政编码!"); 

문제 해결

1. 프로젝트에 사용자 이름이 존재하는지 확인해보니 중국어 입력 검증이 지원되지 않는 것으로 나타났습니다. 내 해결책은 encodeURIComponent를 사용하여 사용자 이름을 인코딩하고 백그라운드 PHP에서 허용된 값

을 urldecode하는 것입니다.

user:{ 
  remote: { 
     url: "chk_user.php", //服务端验证程序 
     type: "post", //提交方式 
     data: { user: function() { 
       return encodeURIComponent($("#user").val()); //编码数据 
     }} 
  } 
}, 

서버측 검증 프로그램 코드 chk_user.php:

<&#63;php 
$request = urldecode(trim($_POST['user'])); 
usleep(150000); 
$users = array('daimajiayuan.com', 'jeymii', 'Peter', 'daimajiayuan'); 
$valid = 'true'; 
foreach($users as $user) { 
  if( strtolower($user) == $request ) 
    $valid = 'false'; 
} 
echo $valid; 
&#63;> 

제가 사용하는 서버 프로그램은 PHP이며, ASP, ASP.NET, JAVA 등도 사용하실 수 있습니다. 또한 이 예는 데모용입니다. 실제 애플리케이션은 데이터베이스 에서 사용자 이름 데이터를 가져와서 클라이언트에서 받은 데이터와 비교하는 것입니다.

2. 체크박스 및 라디오 컨트롤을 확인할 때 확인 정보는 마지막 컨트롤 텍스트 뒤에 표시되지 않고 첫 번째 컨트롤 바로 뒤에 표시되므로 요구 사항을 충족하지 않습니다.

해결 방법은 유효성 검사({})에 다음 코드를 추가하는 것입니다.

errorPlacement: function(error, element) { 
  if ( element.is(":radio") ) 
    error.appendTo ( element.parent() ); 
  else if ( element.is(":checkbox") ) 
    error.appendTo ( element.parent() ); 
  else if ( element.is("input[name=captcha]") ) 
    error.appendTo ( element.parent() ); 
  else 
    error.insertAfter(element); 
} 

3、重置表单。Form表单原始的重置方法是reset自带

ece96ac9f78386f207f2557f088783a7 

点击“重置”按钮，表单元素将会重置，但是再运行Validation插件后，验证的提示信息并没重置，就是那些提示信息没有消失。感谢Validation提供了重置表单的方法：resetForm()

$("input:reset").click(function(){ 
  validate.resetForm(); 
}); 

以上所述就是本文的全部内容了，希望大家能够喜欢。