html5의 setCustomValidity에 대한 자세한 소개

1. 기본 프롬프트

html5는 양식 유효성 검사를 강화합니다. 예:

<form>
    <input type=text required />
    <input type=submit></form>

텍스트를 입력하고 제출 버튼 을 클릭하면 "이 필드를 작성하세요."

이벤트 순서는 다음과 같습니다.
(1) 클릭 이벤트 제출 버튼의 기본 이벤트가 취소되면 종료
(2) HTML5 양식 확인 및 프롬프트가 표시됩니다. 양식 확인에 실패하면 첫 번째 잘못된 입력을 프롬프트하고 종료합니다
(3) 제출 이벤트 form 기본 이벤트가 취소되면

참고:
js를 사용하여 양식의 제출 이벤트를 트리거하는 경우 (3)단계로 바로 이동하며 HTML5 양식 확인은 수행되지 않습니다. 수행됩니다.
따라서 HTML5 확인 메시지를 표시하려면 제출 버튼을 눌러야 합니다.

2. 사용자 정의 프롬프트

setCustomValidity를 사용하여 사용자 정의 프롬프트를 설정하면
validity.customError가 true가 되고 checkValidity는 항상 false를 반환합니다.
또한 양식 유효성 검사는 checkValidity에 따라 메시지를 표시할지 여부를 결정합니다.

따라서 사용자 정의 프롬프트를 설정하고 취소하려면 유효성의 다음 속성 을 사용해야 합니다.

badInput，customError，patternMismatch，rangeOverflow，rangeUnderflow，stepMismatch，tooLong，
typeMismatch，valid，valueMissing

참고:
위 속성 값을 읽습니다. -만, 수동 수정이 유효하지 않습니다.

그 중 맞춤 프롬프트를 취소하는 방법은 다음과 같습니다.

setCustomValidity('') setCustomValidity(null) setCustomValidity(undefined)

예:

<form>
    <input id=text1 type=text required />
    <input id=submit1 type=submit></form><script>
    document.querySelector(&#39;#submit1&#39;).addEventListener(&#39;click&#39;,function(){        
    var $text1= document.querySelector(&#39;#text1&#39;);

        $text1.validity.valueMissing
            ?$text1.setCustomValidity(&#39;The value can\&#39;t be empty.&#39;)
            : $text1.setCustomValidity(&#39;&#39;);
    },false);</script>

또는

$text1.setCustomValidity((function(){    
if($text1.validity.valueMissing){       
 return 'The value can\'t be empty.';
    }    //不写return或者写“return;”表示“return undefined;”}()));

3. ajax 검증 성공 후 제출

이벤트 순서를 고려하면 양식의 제출 이벤트는 양식 검증이 통과된 후에만 트리거됩니다.
따라서 양식의 제출 이벤트에서 기본 동작을 취소하여 Ajax를 사용하여 데이터를 제출할 수 있습니다.

예:

document.querySelector('#form1').addEventListener('submit',function(e){    //ajax

    e.preventDefault();
},false);

위 내용은 html5의 setCustomValidity에 대한 자세한 소개의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!