最近、多くの用途Bootstrapがあります。ブートストラップドキュメントを閲覧して、ポップオーバープラグインは、フォーム検証エラーのプロンプトに特に適していることがわかりました。
非常に頻繁に作られているため、最近密閉され、jQueryプラグインになりました。このプラグインを介して、data-vaild = "checking rules" data-errmsg = "エラーメッセージ"をHTMLタグに定義するだけです。なぜHTMLタグに確認ルールを書く必要があるのですか？また、背景を確認するためにそれを使用したため（背景はノードを使用していません。今すぐASPを使用しています。特別な記事を投稿して、作業を終えた後に原則を書き留めます）。
<入力ID = "u_exam_idnumber" name = "u_exam_idnumber" placeholder = "中学校の入学試験の入場チケット番号を入力してください-vaild ="^/d {5,20} $ "data-errmsg ="入場チケット番号は間違っており、番号のみを含むことができます。最終的な効果は次のとおりです。
プラグインコードは次のとおりです。
"use strict";/*jQuery+Bootstrap verification form by Miaoqiyuan.cn principle: http://www.miaoqiyuan.cn/p/jquery-bootstrap-vaild demonstration: http://www.miaoqiyuan.cn/products/vaild/index.html Source code: http://www.miaoqiyuan.cn/products/vaild/jquery.vaild.js*/(function_jquery) {$.extend（_this）{if（!! $（_ this）.data（ "vaild"）{var pitpent new regexp（$（_ this）.data（ "vaild"））; if（pattern.test（$（_ this）.val（））） ）{$（_ this）.parent（）。removeclass（ "has-error"）。addclass（ "has-success"）; $（_ this）.popover（ "Destroy"）） ;} else {$（_ this）.parent（）。addclass（ "has-error"）。removeclass（ "has-success"）; $（_ this）.data（ "toogle"、 "top"）。データ（ "placement"、 "top"）。データ（ "container"、 "body"） true;}}）; $。fn.extend（{vaild：function（）{$（this）.each（index、_this）{$（_ this）.submit（var checkresult = true; for（var i = 0; i <_this.length; i ++）{check recturd（_this [i] _this [i] _this [_this）{ checkResult;}）; for（var i = 0; i <_this.length; i ++）{$（_ this [i]）。blur（function（）{$。vaild（this）;}）;}}）;}}）;}）（jquery）;電話をかけるのは非常に簡単です。次のコードを使用してください。
<script> $（ "form"）。vaild（）; </script>
フォームが焦点を失うと、合法でない場合、エラーが直接促されます。 [送信]をクリックすると、違法なフォームアイテムがある場合、フォームは継続的に送信されなくなります。
ポップオーバーのデフォルトの背景は白で、警告として機能することはできません。さらに、パディングの設定が大きすぎてスペースが大きすぎます。最後に、CSSを調整して、スクリーンショットの効果を実現します。
/*ポップオーバーをリファクタリングします*/。ポップオーバー{背景：＃c00; color：#fff;}。ポップオーバー.popover-content {padding：1px 5px;}。ポップオーバー。top>。 select {background-color：＃f2dede;}上記は、編集者が紹介したブートストラップポップオーバープラグインです。それがあなたに役立つことを願っています。ご質問がある場合は、メッセージを残してください。編集者は時間内に返信します。 wulin.comのウェブサイトへのご支援ありがとうございます！