H5 フォーム検証失敗プロンプトを設定する方法-H5 チュートリアル-php.cn

ホームページ

ウェブフロントエンド

H5 チュートリアル

H5 フォーム検証失敗プロンプトを設定する方法

php中世界最好的语言

Mar 26, 2018 pm 05:05 PM

html5 失敗確認する

今回は、H5のフォーム検証失敗プロンプトの設定方法を紹介します。 H5のフォーム検証失敗プロンプトを設定する際の注意点

とは何ですか?実際のケースを見てみましょう。

前書き

フロントエンドの子供たちがページを書いているとき、彼らは必然的にフォーム検証の穴に足を踏み入れることになります。このとき、私たちは大量のjsを書かなければならないので、ひざまずかなければなりません。しかし、H5 の登場以降、次のような多くの一般的な式検証が実装され、負担が大幅に軽減されました:

<!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 には pattern 属性が用意されているため、独自の処理を行うことができます。パターン正規表現で指定できます。正規表現が適切に記述されている限り、検証について心配する必要はありません

正規表現は 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: 送信された入力要素の値は、値が無効な場合 (ここでは通常の検証が失敗します)、

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

推奨読書: