“그러나지 않 jQuery 쉽게 자신의 유효성 검사 플러그인?”
인,하지만 여전히 많은 미묘한 차이를 돌봐야 합 표준 라이브러리의 검증 방법(예:이메일,Url,신용 카드 번호). Dom 에 오류 메시지를 배치하고 적절한 경우 표시하고 숨길 필요가 있습니다. Keyup 및 blur 와 같은 단순한 제출 이벤트 이상에 반응하고 싶습니다.
다른 프로젝트에서 사용중인 서버 측 환경에 따라 유효성 검사 규칙을 지정하는 다른 방법이 필요할 수 있습니다. 그리고 결국,당신은 바퀴를 재발 명하고 싶지 않습니까?

“하지만 거기에 이미 많은 유효성 검사 플러그인이 없습니까?”
오른쪽의 많은 비 jQuery 기반 솔루션(는 당신이 피하기 때문에 당신은 발견 jQuery)그리고 일부 jQuery 기반 솔루션이 있습니다. 이 특별한 하나는 가장 오래된 jQuery 플러그인(2006 년 7 월에 시작)중 하나이며 전 세계의 프로젝트에서 그 자체로 입증되었습니다. 이 플러그인이 있어야 검증 솔루션의 법안에 맞는 방법을 논의하는 기사도 있습니다.

확신하지? 이 예제를 살펴보십시오:

<form class="cmxform" method="get" action="">
 <fieldset>
 <legend>Please provide your name, email address (won't be published) and a comment</legend>
 <p>
 <label for="cname">Name (required, at least 2 characters)</label>
 <input name="name" minlength="2" type="text" required>
 </p>
 <p>
 <label for="cemail">E-Mail (required)</label>
 <input type="email" name="email" required>
 </p>
 <p>
 <label for="curl">URL (optional)</label>
 <input type="url" name="url">
 </p>
 <p>
 <label for="ccomment">Your comment (required)</label>
 <textarea name="comment" required></textarea>
 </p>
 <p>
 <input class="submit" type="submit" value="Submit">
 </p>
 </fieldset>
</form>
<script>
$("#commentForm").validate();
</script>

링크하지 않는 좋은 쉽게?

단일 라인의 jQuery 양식을 선택 및 적용의 검증 플러그인,또한 몇 가지 주석에서 각각의 요소를 지정합니다.물론 규칙을 지정하는 유일한 방법은 아닙니다. 또한 해당 기본 메시지에 의존 할 필요는 없지만 양식에 대한 유효성 검사를 설정하기 시작할 때 유용합니다.

링크는 몇 일을 재생하는 경우와 주변의 데모

• 후 노력하지 않은 양식을 제출하는 첫 번째 잘못된 요소에 초점이 맞춰 사용자가 올바른다. 는 경우 다른 잘못된 필드지 않았던 그 첫 번째는 데 초점을 맞추었기 전에 제출,해당 필드에 초점을 맞추고 대신 할 수 있도록,사용자가 바닥에서 시작하면 그 또는 그녀가 좋아한다.
• 기 전에는 필드가 표시가 잘못된 것으로,유효성 검증은 게으른 양식을 제출하기 전에 처음으로,사용자 탭을 통해 필드를 받지 않고 성가신 메시지–그들은하지 않습을 얻을 도청 앞에 할 수있는 기회를 갖는 것은 실제로 입력한 정확한 값
• 한 번 필드 표시된 잘못된,그것은 간절히 검증: 로 사용하면 사용자가 입력한 내용이 필요한 가치,오류 메시지가 제거된
• 경우에는 사용자가 입력한 무언가에서 비 표시된 필드 탭/클릭서(흐림 필드),유효성을 검사–분명히 사용자가 의도 뭔가를 입력하, 하지만 실패했을 정확하게 입력 값

는 행동에 자극을 일으킬 수 있을 때 클릭을 통해 데모의 검증 플러그인–그것을 위해 설계되었는 겸손한 사용자 경험을 짜증나는 사용자가 가능한 한 작은 불필요한 오류 메시지를 가지고 있습니다. 그래서 다른 데모를 시도 할 때 사용자 중 한 명이 할 것처럼 반응하려고 시도하고 그 행동이 더 나은지 확인하십시오. 그렇지 않은 경우 개선을 위해 가질 수있는 아이디어에 대해 알려주십시오!

link API Documentation

validate()메소드에 대한

link 옵션을 찾고있을 것입니다.

그렇지 않은 경우 계속 읽으십시오.

통해 문서,두 가지 용어는 매우 자주 사용되는,그래서 그것의 중요한 알고 있는 그들의 의미에서의 컨텍스트를 검증 플러그인:

• 방법: 검증 방법을 논리를 구현하는 유효성을 검사하는 요소,이메일 방법을 확인하는 올바른 형식의 텍스트 입력의 값입니다. 표준 방법의 집합을 사용할 수 있으며,자신의 쓰기 쉽습니다.
• 규칙:유효성 검사 규칙은”required”및”email”메서드와 함께”validate input with name”primary-mail”과 같은 유효성 검사 메서드와 요소를 연결합니다.

링크 플러그인방법

이 라이브러리가 세 jQuery 플러그인이 방법,주요 진입 점이 되는validate방법:

• validate()–선택한 양식의 유효성을 검사합니다.
• valid()–선택한 양식 또는 선택한 요소가 유효한지 여부를 확인합니다.
• rules()–요소에 대한 규칙을 읽고 추가하고 제거합니다.

링크를 사용자 정의의 선택기

이 라이브러리 확장 jQuery 세 가지 사용자 정의의 선택기:

• :blank선택의 모든 요소와 함께 빈 값입니다.
• :filled–채워진 값을 가진 모든 요소를 선택합니다.
• :unchecked–선택 취소된 모든 요소를 선택합니다.

링크 검사기

유효성 확인 방법을 반환하는 검사기는 개체의 몇 가지 공개하는 데 사용할 수 있는 방법을 트리거하는 유효성 검사 프로그래밍 방식으로 또는 변경 내용의 형태입니다. 유효성 검사기 객체에는 더 많은 메소드가 있지만 여기에 문서화 된 메소드 만 사용하기위한 것입니다.

• Validator.form()–양식의 유효성을 검사합니다.
• Validator.element()–단일 요소의 유효성을 검사합니다.
• Validator.resetForm()–제어 된 양식을 재설정합니다.
• Validator.showErrors()–지정된 메시지를 표시합니다.
• Validator.numberOfInvalids()–유효하지 않은 필드의 수를 반환합니다.
• Validator.destroy()–이 유효성 검사기 인스턴스를 파괴합니다.

몇 가지 정적에서 방법을 검증체:

• jQuery.validator.addMethod()추가–사용자 정의 유효성 검사 방법입니다.
• jQuery.validator.format()–{n}자리 표시자를 인수로 대체합니다.
• jQuery.validator.setDefaults()–유효성 검사에 대한 기본 설정을 수정합니다.
• jQuery.validator.addClassRules()–복합 클래스 메소드를 추가합니다.

링크 목록의 내장 검증 방법

설정된 표준의 검증 방법을 제공합니다.

• required–요소가 필요합니다.
• remote–유효성을 확인하기 위해 리소스를 요청합니다.
• minlength–요소에 주어진 최소 길이가 필요합니다.
• maxlength–요소에 주어진 최대 길이가 필요합니다.
• rangelength–요소에 주어진 값 범위가 필요합니다.
• min–요소가 주어진 최소값을 요구하게합니다.
• max–요소에 주어진 최대 값이 필요합니다.
• range–요소에 주어진 값 범위가 필요합니다.
• step–요소에 주어진 단계가 필요합니다.
• email–요소가 필요한 유효한 이메일
• url–요소가 필요한 유효한 url
• date–요소가 필요 합니다.
• dateISO–요소에 ISO 날짜가 필요합니다.
• number–요소에 십진수가 필요합니다.
• digits–요소에 숫자 만 필요합니다.
• equalTo–이 필요 요소로 다른

몇 가지 이상의 방법으로 제공되는 추가 기능,그리고 현재 포함되어 있습니다 추가-방법이 있습니다.다운로드 패키지의 js. 여기에 모두 문서화되어있는 것은 아닙니다.

• accept–파일 업로드가 지정된 mime 유형 만 허용하도록합니다.
• creditcard–요소에 신용 카드 번호가 필요합니다.
• extension–요소에 특정 파일 확장자가 필요합니다.
• phoneUS–유효한 미국 전화 번호에 대한 유효성 검사.
• require_from_group–그룹의 지정된 수의 필드가 완료되도록합니다.

GitHub 저장소에서 모든 추가 메소드의 소스 코드를 찾을 수 있습니다.

가능하여 다시 정의 구현의 내장에서 규칙을 사용하는$.validator.methods속성

링크를 일반 가이드라인

일반 가이드라인 섹션을 제공합에 대한 상세한 논의 디자인과 아이디어 뒤에 플러그인을 설명하고,어떤 것은 그들이 있습니다. API 설명서보다 더 자세하게 기능을 다룹니다.이 설명서는 사용 가능한 다양한 방법과 옵션을 간략하게 설명합니다.응용 프로그램에서 유효성 검사 플러그인을 사용하기로 결정했고 더 잘 알고 싶다면 지침을 읽는 것이 좋습니다.

링크 필드를 가진 복잡한 이름(브래킷,점)

경우 이름을 가지고 다음과 같은 특성을 사용자에게 이름을 따옴표로 묶습니다. 일반 지침에서 더 자세히 설명합니다.

링크는 너무 많은 재귀

또 다른 일반적인 문제가 발생합니다 이 코드:

 $("#myform").validate({
 submitHandler: function(form) {
 // some other code
 // maybe disabling submit button
 // then:
 $(form).submit();
 }
 });

이 결과에 너무 많은 재귀 오류가:$(form).submit()트리거의 또 다른 검증 결과로,다시 호출 submitHandler,and voila, 재귀. 그것을 양식으로 대체하십시오.유효성 검사가 아닌 대신 기본 제출 이벤트를 트리거하는 submit().

도록 올바른 코드 보이는 약간 다르다:

 $("#myform").validate({
 submitHandler: function(form) {
 form.submit();
 }
 });

링크 Marketo sign-up form

링크 Marketo sign-up form,2 단계

기반으로의 이전 버전 marketo.com 등록 양식을 작성합니다. 사용자 정의 유효성 검사는 한 번이 플러그인으로 대체되었습니다. 그것을 공헌 한 글렌 립카에게 감사드립니다!

데모의 주목할만한 기능:

• 주문을 받아서 만들어진 메시지를 디스플레이:없음 메시지를 표시해 필요한 방법에 대해서만 입력 오류(다음과 같이 잘못된 이메일 포맷);요약 상단에 표시됩니다(“당신이 놓칠 12 필드가 있습니다. 그들은 아래에 강조되었습니다.”)
• 이메일 필드의 원격 유효성 검사. 예를 들어 입력하려고합니다.
• 통합된 마스크 입력 플러그인을 참조하십시오 Zip 및 전 분야와 신용 카드 번호에서 2 단계
• 사용자 정의 방법을 만들기 위한 청구 주소를 2 단계에서 선택적인 경우”같은 회사 주소”선택
• 사용자 지정 메서드에 대한 확인 비밀번호: 암호에 적어도 하나의 숫자와 하나의 문자가 포함되어 있고 길이가 6 자 이상인지 확인합니다. 사용자가 유효하지 않은 값으로 필드를 흐리게하면 입력이 비워지고 다시 포커스를 얻습니다.

링크 기억하기 우유 가입 양식

에서 가입 양식 rememberthemilk.com (이전 버전 기준). 이 플러그인을 사용하여 사용자 지정 유효성 검사를 대체했습니다. 기여 RTM 에 감사합니다!

데모의 주목할만한 기능:

• 사용자 정의 메시지가 표시에 따라,원래의 레이아웃 테이블을 사용하여,성공을 표시하는 옵션을 체크 표시에 대한 유효 필드
• 원격 검사의 사용자명 확인하기 위해,그것은 이미(시”베드로”,”asdf”또는”조지”)

링크의 여러 부분으로 구성된 구매”&판매하는 집”양식

기여 마이클 에반젤리스타,보여주는 여러 형태로 구매 및 판매를위한 주택입니다.

데모의 주목할만한 기능:

• Multipart 를 사용하여 구현,jQuery UI 아코디언 및 사용자 정의하는 방법을 확인하는 경우 요소는 현재 페이지에 있는 경우 검증된
• 통합된 마스크 입력 플러그인을 참조하십시오 전화 및 우편 필드

링크를 사용하여 원격 검사에 도움이다.

기능을 원격에 대한 검증을 돕는 사용자가 작성하 s.

주목할만한 기능의 데모

• 원격증을 확인하는 경우에는 사용자가 입력한 정확한하지 않고,그 양식을 제출하는 첫번째