Home > Article > Web Front-end > How to prompt if H5 form verification fails

How to prompt if H5 form verification fails

php中世界最好的语言Original: 2018-01-12 09:27:052369browse

This time I will bring you H5Form verificationHow to prompt when H5 form verification fails? How to use H5 form verification failure prompt? What are the precautions when H5 form verification fails? The following is a practical case, let’s take a look.

We know that when writing pages, the front-end children's shoes will inevitably step into the pit of form verification. At this time, we have to kneel down because we have to write a bunch of js to check. . But since the emergence of H5, many common expression verifications have been implemented for us, which has relieved us a lot of burden, just like the following:

Email address verification:

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

Email verification is supported by H5 itself, but the scenarios and situations we want to verify are diverse, so what should we do? Should we use JS? Obviously it is not so painful, because H5 provides pattern Attributes, let us do our best! We can specify regular expression in pattern. As long as the regular expression is well written, verification will not worry you!

Regular limit is 11 digits:

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

Question

You can try it. When you enter a number other than 11 digits, an error will be reported. This is the contribution of pattern. But I don’t know if you have discovered a painful phenomenon? That is, if we use the pattern method To verify the form, when the verification fails, its prompts are please be consistent with the requested format. My God, how do our users know what the requested format is? We can't let them see the source code. If this is the case, we don’t even need to write the page, we just ask them to give us the money. Just kidding~

Solution

If there is a problem, we have to solve it. When programming for Google After a long time, I finally found a good solution:

oninvalid: When the value of the submitted input element is an invalid value (here, the regular verification fails), the

oninvalid event is triggered. oninvalid belongs to the Form event.

setCustomValidity(): This is the built-in JS method of HTML5, used to customize prompt information

It turns out that you can customize prompts through oninvalid and setCustomValidity, then this is easy to do, modify the source code as follows :

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

Finally it’s not that annoying “format” anymore. Now the form validation prompt has clearly told us what kind of data should be entered here, so that users can better modify their own Entered!

I believe you have mastered the methods after reading these cases. For more exciting information, please pay attention to other related articles on the php Chinese website!

How to prompt if H5 form verification fails

Related articles