ホームページ >ウェブフロントエンド >H5 チュートリアル >H5 フォーム検証が失敗した場合にプロンプトを表示する方法
H5 フォーム検証が失敗した場合にプロンプトを表示する方法
- php中世界最好的语言オリジナル
- 2018-01-12 09:27:052416ブラウズ
今回は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('请输入11位数字')">
</label>
<input type="submit">
</form>
</body>
</html>最後に、「形式」は面倒ではありません。フォーム検証プロンプトで、ここに入力する必要があるデータの種類が明確に示されるようになりました。これで、ユーザーは入力内容をより適切に変更できるようになりました。これらの事例を読んで、この方法をマスターしたら、よりエキサイティングなコンテンツについては、php 中国語 Web サイトの他の関連記事に注目してください。
関連記事:
Canvas を使用して画像を圧縮する方法 h5 でアプリを起動する方法 H5 でビデオとオーディオのラベルとプログレスバーを使用する方法以上がH5 フォーム検証が失敗した場合にプロンプトを表示する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。