jquery validate 예제

위의 코드 조각에서 키 이름, 나이, 전자 메일 및 가중치는 단순히 입력 요소의 이름입니다. 각 키에는 개체가 해당 값으로 있고 개체의 키-값 쌍은 입력 필드의 유효성을 검사하는 방법을 결정합니다. 이러한 유효성 검사 옵션은 양식의 태그에 추가할 수 있는 특성과 유사합니다. 예를 들어 true로 설정하면 양식 제출에 필요한 요소가 됩니다. 최소 길이를 3과 같은 값으로 설정하면 사용자가 텍스트 입력에 3자 이상을 입력해야 합니다. 설명서 페이지에 간략하게 설명된 몇 가지 다른 기본 제공 유효성 검사 방법이 있습니다. 오류 메시지는 레이블 요소를 사용하여 DOM에 삽입됩니다. 그들 모두는 오류 클래스를 가지고 있으므로 예제에서와 같이 사용자 고유의 스타일을 쉽게 적용할 수 있습니다. 잘못된 입력에 대해서도 마찬가지이며, 오류 클래스도 추가됩니다.

jQuery를 사용하면 폼의 유효성을 검사하는 방법은 무엇입니까? 텍스트 및 전자 메일 ID에 대한 유효성 검사를 원합니다. 실패한 제출시 유효성 검사 메시지가 표시되어야 합니다. 다음은 각 입력 필드에 대한 사용자 지정 오류 메시지를 표시하는 예제입니다. 플러그인이 onfocusout, onkeyup 또는 onclick의 값을 false로 설정하여 키 업, 클릭 및 기타 이벤트에 대한 입력 필드의 유효성을 검사하지 못하도록 할 수 있습니다. 부울 true는 이러한 키에 대한 유효한 값이 아닙니다. 이것은 기본적으로 플러그인이 키 업 이벤트에 대한 포커스를 확인하거나 잃어 버리려면 이러한 옵션을 그대로 두십시오. 이러한 파일을 추가한 후에는 유효성 검사 방법을 사용하여 양식의 유효성을 검사할 수 있습니다. 입력 값의 유효성을 검사하는 방법을 결정하기 위해 일부 규칙을 validate() 메서드에 전달할 수도 있습니다.

규칙 매개 변수의 값은 키 값 쌍이 있는 개체여야 합니다. 각 경우의 키는 유효성을 검사할 요소의 이름입니다. 해당 키의 값은 유효성 검사에 사용할 규칙 집합을 포함하는 개체입니다. 이전 예제에서는 옵션을 전달하지 않고 validate() 메서드를 간단히 호출했습니다. 그러나 해당 개체 내부의 많은 옵션과 함께 이 메서드에 개체를 전달할 수도 있습니다. 이러한 옵션의 값은 양식 플러그인이 유효성 검사, 오류 등을 처리하는 방법을 결정합니다. depends 키워드를 사용하고 true 또는 false를 반환하는 콜백 함수를 전달하여 유효성을 검사하는 다른 필드에 조건부 논리를 추가할 수도 있습니다. 다음은 간단한 규칙을 사용하여 입력의 유효성을 정의하는 예제입니다. 라이브러리는 필요한 경우에만 오류 메시지를 표시하여 가능한 한 사용자 친화적이 도록 시도합니다. 예를 들어 실제로 정보를 입력하지 않고 이름과 전자 메일 필드를 탭하면 오류 메시지가 나타납니다.

그러나 이름 필드에 한 문자만 입력한 후 전자 메일 필드로 이동하려고 하면 세 개 이상의 문자를 입력하는 것에 대한 오류 메시지가 표시됩니다. 이제 jQuery 유효성 검사 플러그인을 사용하여 양식의 데이터를 보다 쉽게 유효성을 검사합니다.