양식 검증 플러그인에 대한 설명 예 Validation application_jquery

jquery.Validation은 클라이언트 양식의 유효성을 검사할 수 있고 확장성이 뛰어난 다양한 사용자 정의 가능한 속성과 메서드를 제공하는 탁월한 jquery 플러그인입니다. 이제 실제 상황과 결합하여 프로젝트에서 자주 사용되는 검증을 예제 DEMO로 정리했습니다. 이 글은 이 예제를 설명함으로써 Validation의 적용을 이해하기 위한 것입니다.

이 예와 관련된 확인은 다음과 같습니다.
사용자 이름: 길이, 문자 확인, 반복성 Ajax 확인(이미 존재하는지 여부).
비밀번호: 길이 확인, 비밀번호 확인을 반복합니다.
이메일: 이메일 주소 확인.
유선전화: 중국 본토 유선전화 번호 확인.
휴대폰 번호: 중국 본토 휴대폰 번호 확인.
URL: 웹사이트 URL 주소 확인.
날짜: 표준 날짜 형식 유효성 검사.
숫자: 정수, 양의 정수 검증, 숫자 범위 검증.
ID 카드: 중국 본토 ID 번호 확인.
우편번호: 본토 우편번호 확인.
파일: 파일 형식(접미사) 확인, 예를 들어 이미지만 업로드할 수 있습니다.
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> 

레이블에 "필수" 클래스 스타일을 부여했다는 점은 언급할 가치가 있으며 해당 기능은 아래에서 언급하겠습니다.
4. 유효성 검사 플러그인 적용
유효성 검사 플러그인을 호출하는 방법:

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

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

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

사실 XHTML 코드에서 필요에 따라 입력의 클래스 속성을 직접 지정할 수 있는데, 공백을 허용하지 않기 때문에 JS 부분에서 반복해서 작성할 필요가 없습니다. 이메일 등의 확인 방법과 동일하게 입력의 클래스 속성을 이메일로 직접 설정합니다.
message: 프롬프트 메시지를 key:value 형식으로 정의합니다. key는 검증할 요소이고, 값은 검증에 실패할 때 나타나는 메시지입니다.

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

이 예제에 포함된 검증 JS는 위의 규칙에 따라 작성되었습니다. 검증 플러그인은 다음과 같은 다양한 기본 검증 방법을 캡슐화합니다.
필수:true는 값을 가져야 하며 비워둘 수 없습니다
원격:url을 사용하면 사용자 이름이 이미 존재하는지 확인할 수 있습니다. 서버는 확인이 통과되었음을 나타내는 true를 출력합니다.
minlength:6 최소 길이는 6입니다
maxlength:16 최대 길이는 16입니다
rangelength: 길이 범위
범위:[10,20] 값 범위는 10-20입니다
이메일:진짜 확인 이메일
url:true 인증 URL
dateISO:true 날짜 형식 'yyyy-mm-dd' 확인
숫자: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('月光光', 'jeymii', 'Peter', 'helloweba'); 
$valid = 'true'; 
foreach($users as $user) { 
  if( strtolower($user) == $request ) 
    $valid = 'false'; 
} 
echo $valid; 
&#63;> 

我使用的服务端程序是PHP，您也可以使用ASP，ASP.NET，JAVA等。此外本例为了演示，用户名数据是直接写在服务端的，真正的应用是从数据库里取出的用户名数据，来和接收客户端的数据进行对比。
2、在验证checkbox和radio控件时，验证信息不会出现在最后的控件文本后面，而是直接跟在第一个控件的后面，不符合我们的要求。

解决办法是在validate({})追加以下代码：

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自带

<input type="reset" value="重 置" /> 

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

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