집 > 기사 > 웹 프론트엔드 > H5 양식 확인 실패 프롬프트를 설정하는 방법

H5 양식 확인 실패 프롬프트를 설정하는 방법

php中世界最好的语言원래의: 2018-03-26 17:05:312182검색

이번에는 H5의 양식 확인실패 메시지 설정 방법을 알려드리겠습니다. H5의 양식 확인 실패 메시지 설정 시 주의사항은 무엇인가요? 다음은 실제 사례입니다.

머리말

프론트엔드 아동용 신발이 페이지를 작성하다 보면 필연적으로 폼 검증의 구덩이에 발을 들여놓게 됩니다. 이때 우리는 많은 js를 작성해야 하기 때문에 무릎을 꿇게 됩니다. 하지만 H5 등장 이후로 다음과 같이 많은 공통 표현 검증이 구현되어 부담이 많이 줄어 들었습니다. 자체적으로 지원되지만 검증하고 싶은 시나리오와 상황은 다양하므로 어떻게 해야 할까요? 당연히 H5에서 패턴 속성을 제공하므로 우리가 직접 할 수 있기 때문에 그렇게 어렵지는 않습니다. ! 패턴에서 지정할 수 있습니다.

정규식

, 정규식을 잘 작성했다면 검증에 대해 걱정할 필요가 없습니다!

정규식은 11자리로 제한됩니다:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Test</title>
</head>
<body>
    <form action="">
        <label >
            邮箱: <input type="email">
        </label>
        <input type="submit">
    </form>
</body>
</html>

Question

11자리가 아닌 숫자를 입력하면 오류가 발생합니다. 이것은 패턴의 기여입니다. 그런데, 우리가 사용한다면? 양식을 확인하려면 요청한 형식이 일관되어야 합니다. 사용자가 소스를 보도록 할 수는 없나요?라는 메시지가 표시됩니다. 그렇다면 페이지를 작성하지 않아도 그냥 결제하게 됩니다. 농담이죠~

Solution문제가 있으면 해결해야 합니다. . 오랫동안 Google을 위해 프로그래밍한 끝에 마침내 좋은 해결책을 찾았습니다.

oninvalid: 제출된 입력 요소의 값은 다음과 같습니다. 값이 유효하지 않은 경우(여기서는 정기 확인이 실패함)

oninvalid 이벤트 트리거됩니다. oninvalid는 Form 이벤트에 속합니다. setCustomValidity(): 이는 프롬프트 정보를 사용자 정의하는 데 사용되는 HTML5의 내장 JS 메소드입니다.

oninvalid 및 setCustomValidity를 통해 프롬프트를 사용자 정의할 수 있다는 것이 밝혀졌습니다. 그러면 다음과 같이 소스 코드를 수정하는 것이 쉽습니다.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Test</title>
</head>
<body>
    <form action="">
        <label >
            数字: <input type="text" pattern="^\d{11}$">
        </label>
        <input type="submit">
    </form>
</body>
</html>

결과:

이제 더 이상 귀찮은 "형식"이 아닙니다. 이제 양식 유효성 검사 프롬프트는 사용자가 입력 내용을 더 잘 수정할 수 있도록 여기에 어떤 종류의 데이터를 입력해야 하는지 명확하게 알려줍니다. 이 기사의 사례를 읽은 후 방법을 마스터했다고 믿으십시오. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트에 있는 다른 관련 기사를 주의 깊게 살펴보시기 바랍니다.