H5 フォーム検証が失敗した場合にプロンプトを表示する方法-H5 チュートリアル-php.cn

H5 フォーム検証が失敗した場合にプロンプトを表示する方法

php中世界最好的语言

リリース： 2018-01-12 09:27:05

オリジナル

2414 人が閲覧しました

今回はH5フォーム検証をお届けします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>

ログイン後にコピー

問題

11 桁以外の数字を入力すると、エラーが報告されます。これはパターンの貢献ですが、パターンを使用してフォームを検証すると、検証が失敗したときにプロンプトが要求された形式と一致するという問題を発見しましたか?一体、ユーザーは何が要求されているかを知ることができるのでしょうか? もしそうなら、私たちはページを書く必要さえありません。冗談ですよ〜

解決策

問題があるので、それを解決しなければなりません。長い間 Google でプログラミングをしてきましたが、ついに良い解決策を見つけました:

oninvalid: When送信された入力要素の値が無効な値である場合 (ここでは、通常の検証が失敗します)、

oninvalid イベントがトリガーされます。 oninvalid は Form イベントに属します。

setCustomValidity(): これは、プロンプト情報をカスタマイズするために使用される HTML5 の組み込みメソッドです。

これは、ソースコードを次のように変更することで簡単にできることがわかります。

<!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 中国語 Web サイトの他の関連記事に注目してください。

Canvas を使用して画像を圧縮する方法

h5 でアプリを起動する方法

H5 でビデオとオーディオのラベルとプログレスバーを使用する方法

以上がH5 フォーム検証が失敗した場合にプロンプトを表示する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。