클라이언트 측 유효성 검사를 위해 jQuery.Validate 사용(기본 문서) Microsoft 유효성 검사 Controls_jquery를 사용하지 않는 이유

主要理由有以下几点：

1、拖控件太麻烦，这个是微软控件的常用方式，你要使用一个控件你得从工具栏中拖到页面里（当然你也可以不拖手写）。

2、必须指定验证对象，验证控件与其他textbox，dropdownlist控件不同的是它是验证其他控件的输入是否有效的，所以必须指定所验证的对象。

3、影响整个页面美观，像一些管理系统总是需要进行大量的用户输入验证，所以就可能导致一个页面上有几十个验证控件严重影响了原来页面里的东西，看起来十分不舒服。

4、ajax验证不方便，现在的系统越来越注重客户的用户体验，所以ajax验证必不可少，但是微软的验证控件并没有提供ajax验证（当然你也可以通过微软的UpdatePanel来进行），需要自己去扩展。

 

说了上面那么多，我只是表明我的意思，微软的验证控件不太好用，所以这时候我就在想有没一些好用点的验证控件呢？

有2个方法：1、自己编写一个（考虑到自己水平还没那么高，想想还是算了）

                2、去找一个已经完善的验证控件（这个比较靠谱，毕竟我做不到，别人还是能做到的）

所以按照我的要求：1、不用拖控件

                       2、不影响页面代码

                       3、简单的AJAX验证

去网络搜寻找到了2种类型的：1、自己编写的ASP.NET验证控件，虽然封装了比较多的功能但是还是满足不了我需求

2、javascript类型的验证函数库，这个比较靠谱，毕竟js可以和页面代码分离（不影响页面代码），只需要调用函数库里的验证代码就可以进行指定对象的验证了（不用拖控件），同时ajax本质还是要靠javascript来调用（AJAX验证）

所以我根据上面第2条线索就搜索使用javascript编写的验证库——jQuery.Validate，这个验证库是属于jQuery的插件，是由bassistance.de编写的，bassistance.de还提供许多jQuery其他插件，如Accordion，Autocomplete（我的使用jQuery.AutoComplete完成仿淘宝商品搜索功能(改进了键盘上下选择体验)就是基于这个autocomplete编写的），Tooltip等等（具体的可以上他们的网站查看）。

决定使用jQuery.Validate首先下载其JS插件:

进入http://bassistance.de/jquery-plugins/jquery-plugin-validation/选择DownLoad下载,里面包含了许多示例可供我们学习

接下来我们就开始正式使用了，建立一个基本的网站，建立好一个母版页（这边使用母版页是因为具体的一些项目中都会有一个母版页来存放一些公用的东西，这边为了模拟一个真实的环境，所以建立母版页，如果觉得不需要可以不建立直接建立页面即可），然后把jQuery和jQuery.Validate都引入母版页：

   

     

팁: 일반적인 참고사항과 다르게 스크립트 경로를 얻기 위해 Page.ResolveClientUrl을 사용합니다. 왜냐하면 일부 프로젝트 개발에서는 서로 다른 모듈의 코드가 작동되기 때문입니다. 다른 디렉터리에 있고 마스터 페이지의 절반은 웹 사이트의 루트 디렉터리에 있으므로 모든 페이지를 참조할 수 있도록 하려면 경로를 다시 획득해야 합니다(. 그러나 다음에는 단점이 있습니다. 문제는 백그라운드 코드에서

에 항목을 동적으로 추가할 수 없다는 것입니다. 해결 방법은

에 문자열을 다시 조합하는 것입니다. 코드를 리터럴로 할당합니다. ).

기본 필수 스크립트를 인용한 후 마스터 페이지에 스크립트를 추가하여 확인합니다.

jQuery.Validate는 양식 제출 작업 전에 양식의 입력 항목이 규칙을 충족하는지 확인하고 요구 사항을 충족하는 경우에만 제출을 허용합니다. 그래서

jQuery(document).ready() 시 폼 확인 및 등록

구체적인 코드는 다음과 같습니다.

코드를 복사하세요 코드는 다음과 같습니다.

body>


여기서 왜 jQuery.Validate 코드를 페이지의 에 작성해야 합니까? 중급 및 고급 장에서 논의되었습니다.
검증 모니터링 등록 후, 마스터 페이지를 통해 하위 페이지를 생성하고 페이지에 다음과 같이 몇 가지 기본 입력 상자 코드를 입력하면 특정 인증 코드를 작성할 수 있습니다.

코드 복사 코드는 다음과 같습니다. <%@ 페이지 제목="직원정보관리-1차 인증" Language="C# " MasterPageFile="~/MasterPage.master" AutoEventWireup="true"

CodeFile="Base.aspx.cs" Inherits="_Base" %>

table cellpadding="1" cellpacing="1" border="1" width="50%" align="center">


사용자 이름


td>




TextBox ID="txtName" runat="server" CssClass="required">

>
나이

>
>

/tr>









위 코드에서는 사용자 이름, 이름, 나이, 이메일 주소에 대한 확인을 완료했습니다. 혹시 발견하셨는지 궁금합니다. 각 텍스트 상자에 필수는 필수, 숫자는 필수입니다. 숫자이며, 이메일은 반드시 이메일 형식이어야 한다는 의미입니다. 필수 이메일이라고 적힌 경우 해당 항목을 반드시 채워야 하며 이메일 형식이어야 한다는 의미입니다.
어때요? 아주 간단하지 않나요? 컨트롤을 드래그하고 유효성 검사 컨트롤을 지정하는 등의 장황한 코드가 필요하지 않습니다. 물론, jQuery.Validate는 날짜, 유효성 검사 등 다양한 유효성 검사 방법도 제공합니다. 범위, 최대값, 최소값, 정수, 값 비교 및 ​​기타 확인 방법을 동시에 사용자 정의할 수도 있습니다(물론 이 사용자 정의 확인 방법은 초급 장에서는 사용할 수 없습니다. 중급 및 고급 장으로 넘어갑니다).
좋아요, 제출 버튼을 클릭하여 효과를 확인해 보겠습니다.

좋습니다. 인증은 성공했지만 문제가 있습니다. 프롬프트 정보가 왜 모두 영어로 되어 있나요?

jQuery.Validate 소스 코드를 확인해 보겠습니다. 물론 236행에 프롬프트 메시지를 정의하는 방법이 있습니다. 여기에서 메시지를 수정하여 중국어로 변경하거나 중국어 메시지 jQuery를 사용자 정의할 수 있습니다. Validate.message_cn.js를 사용한 다음 jQuery.extend를 사용하여 jQuery.Validate의 자체 메시지를 덮어씁니다. 코드는 다음과 같습니다.

코드 복사 코드는 다음과 같습니다.

//중국어 메시지 정의
var cnmsg = {
required: "필수 필드",
remote: "수정해 주세요. this field",
email: "올바른 이메일 형식을 입력하세요.",
url: "법적 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를 변환하려면 두 가지 방법 모두 권장됩니다. 자신에게 적합한 유효성 검사 컨트롤을 만들려면 첫 번째 방법을 사용하여 소스 코드를 직접 변경하세요. 원본 소스 코드를 건드리지 않고 일부 기본 기능만 사용하려면 두 번째 방법을 사용하세요.

그런 다음 페이지를 새로 고쳤더니 당연히 모두 중국어로 되어 있었습니다. 효과 살펴보기:

참고: 여기 오류 메시지의 스타일은 직접 정의할 수 있습니다. 원래 스타일을 수정하고 스타일 정의를 더 아름답게 만들기 위해 오류 아이콘을 추가했습니다. 다음:

코드 복사 코드는 다음과 같습니다.