HTML5 form validation failure prompt problem-H5 Tutorial-php.cn

HTML5 form validation failure prompt problem

小云云

Release： 2017-12-08 09:03:23

Original

2030 people have browsed it

When front-end kids write pages, they will inevitably step into the pit of form validation. 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 verification has been implemented for us, which has relieved us a lot of burden. In this article, we will share with you the prompt problem of HTML5 form verification failure.

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>

Copy after login

Email verification is H5 itself supports it, but the scenarios and situations we want to verify are diverse, so what should we do? Should we use JS? Obviously it’s not that painful, because H5 provides the pattern attribute, allowing us to do our own thing! We can do it on our own pattern specifies a regular expression. As long as the regular expression is written well, there is no need to worry about verification!

The regular expression is limited to 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>

Copy after login

##Question

You can try it. If you enter a number other than 11 digits, an error will be reported. This is the contribution of pattern. But I wonder if you have discovered a painful phenomenon? That is, if we use pattern to verify the form, when the verification fails, its prompts are Please be consistent with the requested format. Oh 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, just let them Just give us the money, just kidding~

Solution

If there is a problem, we have to solve it. After programming for Google for a long time, 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>

Copy after login

Result:

Finally, it’s not the one that hurts. Format", now the form validation prompt has clearly told us what kind of data should be entered here, so that users can better modify their input!

Related recommendations:

h5 form introduction and form validation failure problem example

laravel form validation failure How to prevent the original form data from being cleared?

A simple example of JavaScript implementing form validation function

The above is the detailed content of HTML5 form validation failure prompt problem. For more information, please follow other related articles on the PHP Chinese website!