html5 양식 : JavaScript 및 제한 조건 검증 API

코어 포인트

html5는 클라이언트 양식 검증이 JavaScript 인코딩이 없을 수 있지만보다 복잡한 양식의 경우 JavaScript 및 제약 조건증 API를 사용하여 기본 유효성 검사를 향상시킬 수 있습니다. 이는 모든 브라우저가 모든 HTML5 입력 유형 및 CSS 선택기를 지원하는 것은 아니며 오류 메시지 버블을 스타일링하기가 어렵습니다.

제약 조건 검증 API는 , , 및 와 같은 몇 가지 방법과 속성을 제공합니다. 이들은 필드가 검증 될지 여부, 필드가 검증 될지, 필드의 유효성 및 사용자 정의 유효성 메시지가 설정되는지 확인하는 데 사용됩니다. 그러나 모든 속성이 모든 브라우저에서 지원되는 것은 아닙니다.

간단하고 보편적 인 크로스 브라우저 양식 검증 시스템은 JavaScript 및 제한 조건 검증 API를 사용하여 만들 수 있습니다. 이 시스템에는 기본 검증 비활성화, 모든 필드를 통한 루핑을 통해 기본 확인을 사용할 수 있는지 및 입력 유형이 지원되는지 여부, 필드의 유효성 확인 및 사용자 정의 유효성 메시지 설정이 포함됩니다. 이 시스템은 이전 브라우저와 다른 입력 유형을 지원하도록 조정할 수 있습니다.

이 기사는 HTML5 웹 양식에 관한 세 부분으로 된 시리즈의 마지막 시리즈이며 JavaScript 통합 및 제한 조건 검증 API에 대해 논의 할 것입니다. 태그와 CSS 기사를 읽지 않은 경우 먼저이 개념에 익숙한 지 확인하십시오. HTML5를 사용하면 JavaScript 코드없이 클라이언트 양식 검증을 구현할 수 있습니다. 그러나보다 복잡한 형식을 구현할 때는 다음과 같은 원시 검증을 향상시켜야합니다. .willValidate 모든 브라우저가 모든 HTML5 입력 유형 및 CSS 선택기를 지원하는 것은 아닙니다 오류 메시지 기포는 일반적인 텍스트를 사용하고 ( "이 필드를 채우십시오") 스타일이 어렵습니다 사용자가 양식과 상호 작용하기 전에 페이지가로드되면 및 .checkValidity() 스타일이 적용됩니다. .validity .setCustomValidity() 일부 JavaScript 코드 및 제약 조건증 API는 사용자 경험을 향상시킬 수 있습니다. 다양한 브라우저와 입력 유형을 지원하려면 약간 지저분해질 수 있으며, 그렇게하기 위해 노력할 것입니다.

차단 양식 제출

이전 HTML5 이전에 클라이언트 확인에는 필드를 확인하고 오류를 표시하며 제출 이벤트를 차단하는 양식에 제출 핸들러를 첨부하는 것이 포함됩니다. HTML5에서 브라우저는 먼저 자체 확인을 수행합니다. 제출 이벤트는 양식이 유효한 경우에만 트리거됩니다. 따라서 자신의 오류 표시, 비교 또는 자동 채시 필드와 같은 복잡한 일을하려면 양식의 속성을 ​​ : 로 설정하여 기본 검증을 끄야합니다. 물론 이것은 코드에서 필드 오류를 확인해야한다는 것을 의미하지만, 기본 브라우저 확인을 사용할 수 있음을 곧 알 수 있습니다.

필드

속성

각 입력 필드에는

속성이 있습니다. 이것은 반환됩니다 : .willValidate

: 브라우저가 기본 확인 필드를 놓을 때;
: 브라우저가 필드를 확인하지 않을 때;
• : 브라우저가 IE8과 같은 기본 HTML5 검증을 지원하지 않는 경우. true
위의 기본 확인을 비활성화하기 때문에 각 필드는 를 반환합니다. 모든 필드를 통해 루프를하고 기본 확인이 가능한지 확인하는 핸들러를 만들어 봅시다. false 루프 반복은 단일

컬렉션의 모든 필드를 나타내며 버튼 및 필드 세트와 같은 다른 유형이 아닌 입력인지 확인합니다. 다음 줄은 매우 중요합니다 ...

undefined

와 는 둘 다 잘못된 값이므로

를 확인할 수는 없습니다! 이제 첫 번째 코드 블록 내부의 코드는 기본 유효성 검사와 함께 사용할 수있을 때 평가 될 것임을 알고 있습니다. 그러나 ... <..> false 브라우저가 입력 유형을 지원합니까? validateForm 첫 번째 부분을 읽으면 지원되지 않는 입력 유형이 텍스트로 돌아갑니다. 예를 들면 :

<code class="language-javascript">var form = document.getElementById("myform");
form.noValidate = true;

// 设置处理程序以在提交时验证表单
// onsubmit 用于更轻松的跨浏览器兼容性
form.onsubmit = validateForm;</code>

Firefox 29 또는 IE11의 기본 지원이 없습니다. 이 브라우저는 (효과적으로) 렌더링됩니다

그러나 두 브라우저 모두 텍스트 유형 확인을 지원하므로 elements는 를 반환하지 않습니다! 따라서 우리는 속성이 객체의

속성과 일치하는지 확인해야합니다. 일치하지 않으면 레거시 폴백 검증을 구현해야합니다.

<code class="language-javascript">function validateForm(event) {

    // 获取跨浏览器事件对象和表单节点
    event = (event ? event : window.event);
    var
        form = (event.target ? event.target : event.srcElement),
        f, field, formvalid = true;

    // 循环所有字段
    for (f = 0; f < form.elements.length; f++) {
        // 获取字段
        field = form.elements[f];

        // 忽略按钮、字段集等
        if (field.nodeName !== "INPUT" && field.nodeName !== "TEXTAREA" && field.nodeName !== "SELECT") continue;

        // 原生浏览器验证可用吗？
        if (typeof field.willValidate !== "undefined") {

            // 原生验证可用

        }
        else {

            // 原生验证不可用

        }
    }
}</code>

필드 false 메서드 undefined 기본 확인을 사용할 수 있으면 메소드를 실행하여 필드를 확인할 수 있습니다. 문제가 없으면 메소드가 field.willValidate를 반환하고 그렇지 않으면

를 반환합니다. 이는 유용하지 않으며 모든 브라우저에서 지원하지는 않지만 현재 상태를 다시 확인하지 않고 현재 상태를 반환하는 유사한 메소드도 있습니다. 이 두 가지 방법은 다음과 같습니다.

필드의 객체를 설정하여 오류를보다 자세히 확인할 수 있습니다 검증이 실패하면

이벤트가 현장에서 발사됩니다. 오류, 색상 변경 등을 표시하는 데 사용될 수 있습니다. 해당

이벤트가 없으므로 필요한 경우 오류 스타일과 메시지를 재설정해야합니다.

<code class="language-javascript">// 原生浏览器验证可用吗？
        if (typeof field.willValidate !== "undefined") {

            // 原生验证可用

        }
        else {

            // 原生验证不可用

        }</code>

필드

객체

<code class="language-html"><input type="date" name="dob"></code>

객체에는 다음 속성이 있습니다

- 필드에 오류가 없으면 .valid를 반환합니다. - 필드가 필요하지만 값이 입력되지 않은 경우 true를 반환합니다. - 값이 올바른 구문이 아닌 경우 (예 : 기형 이메일 주소). - 값이 속성의 정규 표현식과 일치하지 않으면 false를 반환합니다. - 값이 허용 된 .valueMissing보다 길면 true를 반환합니다. - 값이 허용 된 .typeMismatch보다 짧은 경우 true를 반환합니다. - 값이 보다 낮 으면 를 반환하십시오. - 값이 보다 높으면 를 반환하십시오. - 값이 일치하지 않으면 .patternMismatch를 반환합니다. - 항목을 값으로 변환 할 수없는 경우 pattern를 반환합니다. - 필드에 사용자 정의 오류가 설정된 경우 true를 반환합니다. .tooLong 모든 속성이 모든 브라우저에서 지원되는 것은 아니므로 너무 많은 가정을하지 않도록주의하십시오. 대부분의 경우, maxlength 또는 true의 결과는 오류 메시지를 표시하거나 숨기기에 충분해야합니다. .tooShort minlength (후속 내용은 원래 텍스트와 동일하고 길이가 너무 길어서 여기에서 생략됩니다. 필요에 따라 출력 내용의 길이와 세부 사항을 직접 조정하십시오.) true

위 내용은 html5 양식 : JavaScript 및 제한 조건 검증 API의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!