ホームページ > 記事 > ウェブフロントエンド > H5 フォーム検証失敗プロンプトを設定する方法
H5 フォーム検証失敗プロンプトを設定する方法
- php中世界最好的语言オリジナル
- 2018-03-26 17:05:312149ブラウズ
今回は、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('请输入11位数字')">
</label>
<input type="submit">
</form>
</body>
</html>結果:
ついに、フォーム検証プロンプトで、ここに入力すべきデータの種類が明確に示されるようになり、ユーザーが入力をより適切に修正できるようになりました。この記事の事例を読んだ後は、この方法を習得したと考えてください。さらに興味深い情報については、PHP 中国語 Web サイトの他の関連記事に注目してください。
推奨読書: 
ローカルストレージとセッションストレージの使用記録
Indexeddb データベースの使用方法の詳細な説明以上がH5 フォーム検証失敗プロンプトを設定する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
前の記事：HTML5 で地理位置情報を使用する方法次の記事：HTML5 で地理位置情報を使用する方法