자바 스크립트에서 유효하지 않은 필드를 표시 할 수 있습니까?

이 게시물을 읽은 후 HTML5에 도입 된 '유효'및 '유효하지 않은'입력 값에 대한 의사 클래스가 있음을 발견했습니다.

자바 스크립트에서 입력 필드를 유효하지 않거나 유효한 것으로 표시 할 수있는 방법이 있습니까? 또는 사용 된 유효성 검사 방법을 재정의 할 수 있습니까?

이를 위해 customValidity 함수를 사용할 수 있습니다.

customValidity 메시지를 필드에 추가하면 무효화됩니다. 메시지를 빈 문자열로 설정하면 다시 유효 해집니다 (다른 이유로 인해 유효하지 않은 경우 제외).

field.setCustomValidity("Invalid field."); 필드가 유효하지 않게됩니다.

field.setCustomValidity(""); HTML5 제약 조건에 실패하지 않는 한 필드를 유효하게 만듭니다.

편집 : 누군가 DOM에 대한 "유효한" "잘못된"속성을 찾고 있다고 설명했습니다.

을 사용하여 각 태그에 속성을 추가합니다 dom_object.setAttribute("isvalid", "true"). 매번 이러한 속성을 업데이트하고 매번 사용하는 중앙 유효성 검사 기능을 가질 수도 있습니다 dom_object.getAttribute("isvalid").

요소가 포커스를 잃을 때마다 또는 원할 때마다이 함수를 실행할 수 있습니다.

정확히는 우아하지는 않지만 안타깝게도 현재 자바 스크립트와 HTML5에 "의사"지원이 없습니다.

질문을 이해하면 Javascript로 유효성 검사를 수행 할 수 있습니다. 그러나 클라이언트 측 유효성 검사, 특히 javascript 유효성 검사를 피하는 것은 매우 쉽습니다 . 클라이언트 데이터를 신뢰해서는 안되며 항상 서버 측에서 확인해야합니다.

예를 들어 소스 코드를 검사하여 요소 ID를 쉽게 찾은 다음 document.getElementById('some_id').setAttribute('max', new_number)최대 값을 변경할 수 있습니다 (링크의 항목 중 하나임).

다양한 방법이 있으니 일반적인 관용구를 알려 드리겠습니다.

수행하여 값을 얻을 수 있습니다 document.getElementById('form_element_id').value( name서버로 전송되는 양식 a 와 idjavascript에서 사용 하는 양식을 제공해야 함 ). 텍스트 영역의 경우 .innerHTML.

그런 다음 변수에 값이 있으며이를 확인하는 다양한 방법이 있습니다.

예를 들어 if (parseInt(my_value) < 0) //error. 정규식을 사용할 수도 있지만 모두 설명하지는 않겠지 만 여기에서 시작할 수 있습니다 . http://www.w3schools.com/jsref/jsref_obj_regexp.asp . 나는 w3schools가 최고의 소스가 아니라는 것을 알고 있지만 시작하기에 괜찮은 곳이라고 생각합니다.

이제 유효성 검사 부분에 대해 : onsubmit="return validateForm()validateForm ()이 모든 검사를 수행하는 함수 인 양식 태그에 추가 하십시오. 그리고 함수는 true유효하고 false그렇지 않으면 반환 합니다 . 이것은 기본 유효성 검사 기능을 재정의합니다 (기본적으로 아무것도 수행하지 않음).

위의 예에서 그래서, //error로 대체 될 것이다 return false. 다른 일도 할 수 있습니다. 예를 들어 오류를 경고하고 false를 반환합니다. 또한 javascript를 사용하여 유효하지 않은 필드를 강조 표시 할 수 있습니다 ( " 입력 필드를 javascript에서 유효하지 않음 / 유효한 것으로 표시 "를 의미하는지 확실하지 않음 )

물론 모든 필드를 확인하지 않으려면 특정 필드가 통과 할 때만 true를 반환하면됩니다. 다시 말하지만, 이것에 의존해서는 안되지만, 평균적인 사람들 만 억제한다면 쉬운 해결책입니다.

자바 스크립트에서 입력 필드를 유효하지 않거나 유효한 것으로 표시 할 수있는 방법이 있습니까?

불행히도 JavaScript에서는 가상 클래스의 스타일을 지정할 수 없습니다. 실제 요소가 아니기 때문에 실제 DOM에 존재하지 않기 때문입니다.

바닐라 JavaScript를 사용하면 유효성 검사 API를 사용합니다 .

jQuery에서는 간단하게 http://jsfiddle.net/elclanrs/Kak6S/ 할 수 있습니다.

if ( $input.is(':invalid') ) { ... }

또는 사용 된 유효성 검사 방법을 재정의 할 수 있습니까?

HTML5 유효성 검사를 사용하는 경우 마크 업을 고수하십시오. 그렇지 않으면 HTML5 유효성 검사를 비활성화 $form.attr('novalidate', 'novalidate')하고 JS를 사용하여 필드 유효성을 검사 한 다음 필요한 곳에 valid또는 invalid클래스 를 추가 할 수 있습니다. HTML5가 아닌 브라우저를 지원하기 위해 이와 같이 작동 하는 플러그인 을 만들었습니다 .