H5 양식 확인이 실패할 경우 메시지를 표시하는 방법-H5 튜토리얼-php.cn

집

웹 프론트엔드

H5 튜토리얼

H5 양식 확인이 실패할 경우 메시지를 표시하는 방법

php中世界最好的语言

Jan 12, 2018 am 09:27 AM

html5 어떻게 힌트

이번에는 H5양식 확인H5 양식 확인 실패 시 메시지를 표시하는 방법은 무엇인가요? H5 양식 검증에 실패할 경우 주의 사항은 무엇인가요? 다음은 실제 사례입니다. 살펴보겠습니다.

프론트엔드 개발자들은 페이지 작성 시 필연적으로 폼 유효성 검사의 함정에 빠지게 된다는 것을 알고 있습니다. 이때 확인해야 할 js를 잔뜩 작성해야 하기 때문에 무릎을 꿇어야 합니다. , 다음과 같이 많은 일반적인 표현 확인이 구현되어 부담이 많이 줄어 들었습니다.

이메일 주소 확인:

<!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>

로그인 후 복사

이메일 확인은 H5 자체에서 지원되지만 확인이 필요합니다. 다양한 시나리오가 있습니다 JS를 다시 사용해야 할까요? H5는 패턴 속성을 제공하므로 패턴에 정규 표현식을 지정할 수 있습니다. 정규식은 잘 작성되어 있으니 확인에 걱정은 없으실 겁니다!

정규식은 11자리로 제한되어 있습니다:

<!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>

로그인 후 복사

Problem

11자리 이외의 숫자를 입력하면 오류가 발생합니다. . 이것은 패턴의 기여입니다. 그런데 당신이 괴로운 현상을 발견했습니까? 즉, 패턴을 사용하여 양식을 검증하면 검증이 실패할 때 요청한 형식과 일치한다는 메시지가 나타납니다. 맙소사, 사용자는 도대체 형식이 무엇인지 어떻게 알 수 있습니까? 그렇다면 우리는 페이지를 작성할 필요조차 없습니다. 그냥 돈달라고 하세요~

해결책

문제가 있어서 해결해야겠습니다. 오랫동안 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}$" oninvalid="setCustomValidity(&#39;请输入11位数字&#39;)">
        </label>
        <input type="submit">
    </form>
</body>
</html>

로그인 후 복사

결국 계란이 아닙니다. "형식"이 고통스럽습니다. 이제 양식 확인 프롬프트에서 사용자가 입력 내용을 더 잘 수정할 수 있도록 여기에 어떤 종류의 데이터를 입력해야 하는지 명확하게 알려주었습니다. 이 사례를 읽어보시고, 더 흥미로운 내용을 보시려면 PHP 중국어 웹사이트의 다른 관련 기사를 주의 깊게 살펴보시기 바랍니다!