jQuery.Validate 를 사용 하여 클 라 이언 트 인증(초급 편)을 할 때 마이크로소프트 인증 컨트롤 을 사용 하지 않 는 이유

주요 이 유 는 다음 과 같은 몇 가지 가 있다.
1.컨트롤 을 끌 기 가 너무 귀 찮 습 니 다.이것 은 마이크로소프트 컨트롤 의 일반적인 방식 입 니 다.컨트롤 을 사용 하려 면 도구 모음 에서 페이지 로 끌 어야 합 니 다.(물론 손 으로 쓰 지 않 아 도 됩 니 다)
2.인증 대상 을 지정 해 야 합 니 다.검증 컨트롤 은 다른 textbox,dropdownlist 컨트롤 과 달리 다른 컨트롤 의 입력 이 올 바른 지 검증 하기 때문에 검 증 된 대상 을 지정 해 야 합 니 다.
3.전체 페이지 의 미관 에 영향 을 미친다.예 를 들 어 일부 관리 시스템 은 대량의 사용자 입력 검증 을 해 야 하기 때문에 한 페이지 에 몇 십 개의 검증 컨트롤 이 원래 페이지 의 물건 에 심각 한 영향 을 주 고 매우 불편 해 보일 수 있다.
4.ajax 검증 이 불편 합 니 다.현재 시스템 은 고객 의 사용자 체험 을 점점 중시 하기 때문에 ajax 검증 이 없어 서 는 안 됩 니 다.그러나 마이크로소프트 의 검증 컨트롤 은 ajax 검증 을 제공 하지 않 았 습 니 다(물론 마이크로소프트 의 UpdatePanel 을 통 해 진행 할 수 있 습 니 다).스스로 확장 해 야 합 니 다.
 
위 에서 그렇게 많은 말 을 했 는데,나 는 단지 나의 뜻 을 표 시 했 을 뿐이다.마이크로소프트 의 검증 컨트롤 이 그다지 좋 지 않 기 때문에,이때 나 는 좋 은 검증 컨트롤 이 있 을 까 생각 하고 있 었 다.
두 가지 방법 이 있 습 니 다.1.스스로 작성 하 세 요.
                2.완 선 된 검증 컨트롤 을 찾 습 니 다.(이것 은 비교적 믿 을 수 있 습 니 다.제 가 할 수 없 기 때문에 다른 사람 이 할 수 있 습 니 다)
그래서 제 요구 에 따라:1.컨트롤 을 끌 지 않 아 도 됩 니 다.
                       2.페이지 코드 에 영향 을 주지 않 음
                       3.간단 한 AJAX 검증
인터넷 검색 을 통 해 2 가지 유형 을 찾 았 습 니 다.1.자신 이 작성 한 ASP.NET 인증 컨트롤 은 비교적 많은 기능 을 봉 인 했 지만 제 요 구 를 만족 시 키 지 못 했 습 니 다.
2.javascript 형식의 검증 함수 라 이브 러 리 입 니 다.이것 은 비교적 믿 을 만 합 니 다.js 는 페이지 코드 와 분리 할 수 있 기 때문에(페이지 코드 에 영향 을 주지 않 음)함수 라 이브 러 리 의 검증 코드 만 호출 하면 지정 대상 의 검증 을 할 수 있 습 니 다(컨트롤 을 끌 지 않 아 도 됨).또한 ajax 본질은 javascript 으로 호출 해 야 합 니 다(AJAX 검증).
그래서 저 는 위의 두 번 째 단 서 를 바탕 으로 자바 script 으로 작 성 된 인증 라 이브 러 리 인 jQuery.Validate 를 검색 합 니 다.이 인증 라 이브 러 리 는 jQuery 에 속 하 는 플러그 인 입 니 다.bassistance.de에 의 해 작 성 된 것 입 니 다.bassistance.de많은 jQuery 다른 플러그 인 도 제공 합 니 다.예 를 들 어Accordion(제Autocomplete는 바로 이 autocomplete 를 바탕 으로 작 성 된 것 입 니 다.)jQuery.AutoComplete 를 사용 하여 타 오 바 오 상품 검색 기능 완성(키보드 상하 선택 체험 개선)등등.
jQuery.Validate 를 사용 하여 먼저 JS 플러그 인 을 다운로드 하기 로 결 정 했 습 니 다.
들 어가 기TooltipDownload 다운 로드 를 선택 하 십시오.우리 가 배 울 수 있 는 많은 예제 가 포함 되 어 있 습 니 다.
그 다음 에 우 리 는 본 격 적 으로 사용 하기 시작 했다.기본 적 인 사 이 트 를 구축 하고 모판 페이지 를 만 들 었 다.그리고 jQuery 와 jQuery.Validate 를 모두 모 페이지 에 도입 합 니 다.
   
     
팁:일반적인 인용 과 달리 저 는 스 크 립 트 의 경 로 를 Page.ResolveClient Url 로 가 져 옵 니 다.일부 프로젝트 개발 에서 서로 다른 모듈 의 코드 는 서로 다른 디 렉 터 리 로 나 누 어 작 동 하기 때문에 모판 페이지 의 절반 은 사이트 의 루트 디 렉 터 리 이기 때문에 모든 페이지 의 기본 적 인 참조 가 가능 합 니 다.그래서 경 로 를 다시 가 져 와 야 합 니 다.
기본 적 인 스 크 립 트 를 참조 한 후 모판 페이지 에 스 크 립 트 를 추가 하여 검증 합 니 다. 
jQuery.Validate 는 폼 을 감시 하 는 form 입 니 다.폼 을 제출 하기 전에 jQuery.Validate 는 폼 의 입력 항목 이 규칙 에 만족 하 는 지 확인 하고 만족 해 야 제출 할 수 있 습 니 다.그래서 필요 하 다
jQuery(document).ready()시 form 에 인증 등록 해 야 합 니 다.
구체 적 인 코드 는 다음 과 같다.
 
<body>
<form id="form1" runat="server">
<div>
<asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
</asp:ContentPlaceHolder>
</div>
</form>
<script type="text/javascript">
jQuery(document).ready(function() {
jQuery("#<%=form1.ClientID %>").validate();
});
</script>
</body>
이쪽 으로 오 면 jQuery.Validate 의 코드 를 왜 페이지 의에 써 야 하 는 지 의문 이 생 길 것 이다.이 점 은 검증 규칙 의 제정 과 조별 검증 방법 과 관련 되 어 중급 편 과 고급 편 에서 설명 할 것 이다.인증 모니터링 을 등록 한 후에 우 리 는 구체 적 인 인증 코드 를 작성 할 수 있 습 니 다.우 리 는 모판 페이지 를 통 해 하위 페이지 를 만 들 고 페이지 에 몇 개의 기본 적 인 입력 상자 코드 를 다음 과 같이 넣 습 니 다.
 
<%@ Page Title=" - " Language="C#" MasterPageFile="~/MasterPage.master" AutoEventWireup="true"
CodeFile="Base.aspx.cs" Inherits="_Base" %>
<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="Server">
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="Server">
<table cellpadding="1" cellspacing="1" border="1" width="50%" align="center">
<tr>
<td>

</td>
<td>
<asp:TextBox ID="txtUid" runat="server" CssClass="required"></asp:TextBox>
</td>
</tr>
<tr>
<td>

</td>
<td>
<asp:TextBox ID="txtName" runat="server" CssClass="required"></asp:TextBox>
</td>
</tr>
<tr>
<td>

</td>
<td>
<asp:TextBox ID="TextBox1" runat="server" CssClass="number"></asp:TextBox>
</td>
</tr>
<tr>
<td>

</td>
<td>
<asp:TextBox ID="TextBox2" runat="server" CssClass="email"></asp:TextBox>
</td>
</tr>
<tr>
<td colspan="2" align="center">
<asp:Button ID="Button1" runat="server" Text=" " />
</td>
</tr>
</table>
</asp:Content>
위의 코드 에서 저 는 사용자 이름,이름,연령,메 일 에 대한 검증 을 완 료 했 습 니 다.발 견 했 는 지 모 르 겠 습 니 다.바로 모든 textbox 의 class 스타일 입 니 다.그 중에서 required 는 필수 적 이 고 number 는 숫자 여야 한 다 는 것 을 표시 합 니 다.email 은 이메일 형식 이 어야 한 다 는 것 을 표시 합 니 다.required email 로 쓰 면 이 필드 를 작성 해 야 하 는 동시에 email 형식 이 어야 합 니 다.어때요?상당히 간단 하지 않 습 니까?드래그 컨트롤 을 줄 이 고 검증 컨트롤 등 시 끄 러 운 코드 를 지정 합 니 다.[스타일 명]만 있 으 면 됩 니 다.물론 jQuery.Validate 는 날짜,범위,최대 치,최소 치,정수,값 비교 등 여러 가지 검증 방법 도 제공 합 니 다.또한 인증 방식 도 사용자 정의 할 수 있 습 니 다.자,제출 단 추 를 누 르 고 실행 효 과 를 봅 시다.좋 습 니 다.과연 검증 에 성 공 했 습 니 다.그런데 문제 가 있 습 니 다.어떻게 정 보 를 모두 영어 로 제시 합 니까?jQuery.Validate 소스 코드 를 살 펴 보 겠 습 니 다.236 줄 에서 과연 알림 메시지 의 정의 방식 이 있 습 니 다.우 리 는 이 메 시 지 를 중국어 로 바 꾸 거나 중국어 메 시 지 를 사용자 정의 할 수 있 습 니 다.jQuery.Validate.messagecn.js,그리고 jQuery.extend 를 사용 하여 jQuery.Validate 자체 의 메 시 지 를 덮어 씁 니 다.코드 는 다음 과 같 습 니 다.
 
//
var cnmsg = {
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} ")
};
jQuery.extend(jQuery.validator.messages, cnmsg);
이렇게 하면 모판 페이지 에서 jQuery.Validate.message 를 참조 하면 됩 니 다.cn.js 는 기 존의 영어 힌트 를 교체 할 수 있 습 니 다.두 가지 방식 은 모두 바람 직 합 니 다.jQuery.Validate 를 자신 에 게 맞 는 검증 컨트롤 로 바 꾸 려 면 첫 번 째 방식 으로 소스 코드 를 직접 바 꾸 는 것 입 니 다.기본 적 인 기능 으로 원본 코드 를 움 직 이지 않 으 려 면 두 번 째 방법 을 사용 하 는 것 입 니 다.그런 후에 우 리 는 페이지 를 다시 새로 고 쳤 는데,과연 모두 중국어 가 되 었 다.효과 보기:주의:여기 오류 알림 메시지 의 스타일 은 스스로 정의 할 수 있 습 니 다.저 는 원래 의 스타일 을 수정 하고 오류 아이콘 을 추가 하여 더욱 보기 좋 습 니 다.스타일 정 의 는 다음 과 같 습 니 다.
 
<style type="text/css">
/************jQuery.Validate ********************/
label.error
{
background: url(images/error.png) no-repeat 0px 0px;
color: Red;
padding-left: 20px;
}
input.error
{
border: dashed 1px red;
}
/************jQuery.Validate ********************/
</style>
여기 서 jQuery.Validate 를 사용 하여 클 라 이언 트 인증 을 하 는 초급 편 을 다 썼 습 니 다.구체 적 인 코드 는 아래 의 소스 코드 를 다운로드 하여 볼 수 있 습 니 다.중급 편 과 고급 편 기대 해 주세요.PS:1,코드 중 jquery.vaidate.js 는 공식 버 전 이 고 jquery.vaidate 1.js 는 제 가 수정 한 버 전 입 니 다.수정 내용 은 중급 편 과 고급 편 에서 말씀 드 리 겠 습 니 다.2.jQuery.Validate 는 클 라 이언 트 인증 만 할 수 있 고 서버 측 검증 을 대체 할 수 없습니다.시스템 의 안전 을 위해 서버 측 에서 검증 을 해 야 합 니 다.소스 코드 다운로드:http://bassistance.de/jquery-plugins/jquery-plugin-validation/작성 자:주문 하 다

좋은 웹페이지 즐겨찾기