この記事では、Twitterから作られたbootstrapvalidator.jsを推奨しています。 BootstrapはTwitterから作られているため、元のBalidatorを使用する方が信頼できます。 BaiduでBootstrapValidatorを検索するための多くのモデルがありますが、これだけをお勧めします。
1。見てください
簡単な紹介のために、ここに空のチェックのみがあります。
bootstrapvalidator公式ダウンロードアドレス
2。リソースリファレンス
リソースパッケージをダウンロードした後、次のディレクトリを見ることができます。
次に、次の3つのファイルをプロジェクトに紹介します。
<link type = "text/css" rel = "styleSheet" href = "$ {ctx}/components/validate/css/bootstrapvalidator.css"/> <script = "text/javascript" src = "$ {ctx}/components/validate/js/js/js/js/js/boottraptator type = "text/javascript" src = "$ {ctx} /components/validate/js/language/zh_cn.js"> </script>3。メンバー名は空のプロジェクト構成ではありません
<form action = "$ {ctx}/login" method = "post" onsubmit = "return validatecallback（this）"> <div> <div> <about>アカウント</label> <入力タイプ= "テキスト"オートフォーカスname = "username" placeholder = "Data-BV-Notemptyとは、メンバー番号を空のチェックとして使用する必要があることを意味します。
フォームグループのdivが必要です。そうしないと、「再帰的すぎる」エラーが報告されます。
フォームフォームを送信すると、validAtecallbackメソッドが実行されます。この方法は、ステップ5で特別に導入されています。
4.ページの読み込み後にブートストラップバリレータを有効にします
$（function（）{// form $（ "form.required-validate"））。各（function（）{var $ form = $（this）; $ form.bootstrapvalidator（）; // fix bootstrap validatorはserver $ form.on（ 'success.form.bv'、form submission（e）{// preved e.prevent（）; }）;フォームに「class = "rebult-validate" '属性を追加し、jqueryを介して対応するフォームを取得し、デフォルトのbootstrapvalidatorのロードを実行します。
上記のコードでコメントしたコードの一部に注意してください。詳細については、BootstrapValidatorによって提出されたバグを繰り返し修正するには、以下を参照してください。特定のコンテンツは次のとおりです
Bootstrapvalidatorはとても美しいですが、あなたの美しい顔の下に隠された殺人の意図がしばしばあります。これが、繰り返し提出バグがある理由です。
解決：
// form $（ "form.required-validate"、$ p）.each（function（）{var $ form = $（this）; $ form.bootstrapvalidator（）。on（ 'suctus.form.bv'、function（e）{//デフォルトのイベントがe.preventdefault（）;};}）;}）;bootstrapvalidatorのメソッドを設定します。そのキーはsuccess.form.bvであり、値はe.preventdefault（）;。
バグ調査：
調査結果：
1. bootstrapvalidatorを使用しない場合、図に示すように問題はありません。
2。初めてクリックすると、提出が2回繰り返されます。次に、ユーザー名に再入力した後、1回で送信します。
バグは環境になります：
コードを次のようにコピーします。<form action = "$ {ctx}/mem/login？callbacktype = forward" method = "post" onsubmit = "return validatecallback（this、tabajaxdone）" type = "login">
...
<button type = "submit">送信</button>
</form>
説明する：
これは通常のフォームであり、アクションにリクエストアドレスを備えており、主にフォームを検証し、リクエストを送信し、最後にTabajaxdoneメソッドを呼び戻すためのフォームには、OnSubmitメソッドがあります。
バグ分析：
1.フォームフォームには間違いなく問題ありません。ブートストラップ検証がない場合、まったく問題はありません。
2。jquery検証を使用して以前に問題はありませんでした。
3。その後、問題はBootstrap Validateでのみ発生する可能性があります。
4.最初のクリックが送信されたときにのみ繰り返されるため、ブートストラップ検証のデフォルト使用に問題はありません。
5。これは、Bootstrap Validateにデフォルトの送信要求があることです。
検証オブジェクトをもう一度見ると、デフォルトでは多くのイベントがあることがわかります。
バグのデバッグ：
// form $（ "form.required-validate"、$ p）.each（function（）{var $ form = $（this）; $ form.bootstrapvalidator（）; // .on（ 'success.form.bv'、function（e）{// //デフォルトのイベントの提出を防ぐ//1.ページが初めてロードされた場合、フロントエンドのデータ検証を実行する前に、BootStrapValidatorを上記の方法でロードする必要があります。
2。コメントコードを見たことがありますが、おそらくそれを推測できるかもしれません。それが解決策です。そうです、このイベント処理を追加して、e.preventdefault（）を形成して使用します。デフォルトのイベントの提出を防ぐため。
5.フォームを送信するときにアイテムを確認します
function validatecallback（form、callback、cundilemsg）{yunm.debug（ "フォームフォーム検証と送信"）; var $ form = $（form）; var data = $ form.data（ 'bootstrapvalidator'）; if（data）{//メモリを修復するコンポーネントはdata.validate（）を確認しません。 if（！data.isvalid（））{return false; }} $ .ajax（{type：form.method || 'post'、url：$ form.attr（ "action"）、$ form.serializearray（）、datatype： "json"、cache：false、false：callback || yunm.ajaxdone、エラー：yunm.ajaxerror}）; falseを返します;}validAtecallbackでフォームフォームを取得した後、フォームをisValidメソッドを介して返すことができ、渡されるかどうかを確認できます。
フォームの検証が渡されたら、Ajaxを介してフォームをサーバーに送信します。
それでも詳細に勉強したい場合は、ここをクリックして3つのエキサイティングなトピックを勉強して添付できます。
ブートストラップ学習チュートリアル
ブートストラップ実用的なチュートリアル
ブートストラッププラグインの使用チュートリアル
上記はこの記事に関するものです。すべての人の学習に役立つことを願っています。