この記事では、フォーム検証の例を判断する方法を紹介します。メインテキストを紹介する前に、プラグインを紹介します。
プラグインの紹介
最初に写真を撮りましょう：
住所をダウンロード：https：//github.com/nghuuphuoc/bootstrapvalidator
使用のヒント
中国文化：
プラグインをダウンロードした後、/js/bootstrapvalidator/language/zh_cn.jsをファイルに紹介します。つまり、中国文化を実装してください
提出前の検証フォーム：
より豊富なフォーム検証例：http：//www.jq22.com/yanshi522、コードを直接アップロードしてください。
<！doctype html> <html> <head> <title> bootstrapvalidator demo </title> <link rel = "styleSheet" href = "href =" css fontawesome - > <！ - <link rel = "styleSheet" href = "http://netdna.boottrapcdn.com/fort-awesome/../css/font-aweoly.css"/>> - > <スクリプト= "テキスト/javascript" "http://netdna.boottrapcdn.com/../css/font-aweome.css" http://netdna.bootstrapcdn.com/../css/javascript "" src = "ベンダー/jquery/jquery -... min.js"> </script> <スクリプトタイプ= "text/javascript" src = "vendor/js/bootstrap.min.js"> </script> <script type = "text/javascript" " src = "dist/js/bootstrapvalidator.js"> </script> </head> <body> <div> <div> <！ - form： - > <section> <div> <div> <h> sign Up> <form id = "defaultform" method = "post" active = "ターゲット name="firstName" placeholder="First name" /></div><div><input type="text" name="lastName" placeholder="Last name" /></div></div><div><label>Username</label><div><input type="text" name="username" /></div></div><div><label>Email address</label><div><input type="text" name = "email"/> </div> </div> <div> <lable>パスワード</labe> <div> <入力タイプ= "パスワード"パスワード "/>> </div> </div> <div> <div> <ラベル> div> <入力タイプ="パスワード "name =" cundilePassword "/>> name="gender" value="male" /> Male</label></div><div><label><input type="radio" name="gender" value="female" /> Female</label></div><div><label><input type="radio" name="gender" value="other" /> Other</label></div></div><div><label>Birthday</label><div><input type="text" name = "Birthday"/>（yyy/mm/dd）</div> </div> <div> <div> <ableages </label> <div> <abow> <input Type = "Checkbox" name "value ="英語 "/>英語</label> </div> <label> <input Type =" name = "フランス</label> </div> <div> <label> <入力タイプ= "チェックボックス" name = "languages []" value = "digram"/>> div> <div> <div> <label> <input type = "checkbox" name = "languages []" value = "russian"/>> russian </label> </div> <in <input = "" otn> <"otn>"その他</label> </div> </div> <div> <abour>プログラミング言語</label> <div> <div> <div> <div> <label> <input type = "checkbox" name = "" programs [] "value =" net "/> .net </label> </div> <div> <div> <label> <input type =" checkbox "name =" [] type = "Checkbox" name = "programs []" value = "c"/> c/c ++ </label> </div> <div> <label> <input type = "checkbox" name = "" value = "php"/> php </label> </div> <div> <label> <input type "name =" "perl"/>> "/>>" perl "/>>" perl </label> </div> <div> <label> <input type = "checkbox" name = "programs []" value = "ruby"/> ruby </label> </div> <div> <label> <input type = "checkbox" name = "" program /> python </label> </div> <div> <label> <input type = "checkbox" name = "" value = "javascript"/> javascript </label> </div> </div> <div> <label id = "captchaoperation"> </label> <div> <入力タイプ "テキスト" type = "name =" signup "value =" signup ">サインアップ</button> <ボタンタイプ=" "name =" signup2 "value =" signup 2 ">サインアップ2 </button> <ボタン="ボタン "id =" validatebtn ">マニュアル検証</button> <ボタンタイプ=" button = "button" idn " ：form-> </div> </div> <script type = "text/javascript"> $（document）.ready（function（）{// simple captchafunction randomnumber（min、max）{return math.floor（math.random（） *（） *（max -min + 1） + min）;}; '+'、randomNumber（1、200）、 '=']。join（ ''））; $（ '＃defaultform'）。bootstrapvalidator（{// live： 'disabled'、message： 'この値は無効'、フィードバック：{有効： 'glyphicon glyphicon-ok'、invalid： 'glyphicon glicon-aint' '、' glyphicon glicon-aint '、' glyphicon glyphicon-refresh '}、fields：{firstName：{validators：{notempty：{first name and emact'}}}}}}}}}}}}、{notempty：{message： 'last name ase be and con neact ver'}}} {notempty：{message： 'usernameは必須であり、空にすることはできません'}、stringlength：{min：6、max：30、message： 'ユーザー名は長さ6文字以上でなければなりません'}、regexp：{regexp：/^ [a-za-z0-9_/. Underscore '}、remote：{url：' remote.php '、message：' username is not '}、different：{field：' password '、message：' username and passwordは互いに同じではない}}、email：{validators：{emailaddress：{email adress not '} {emailaddress：{emailaddress：{valid on not'}} {notempty：{message： 'パスワードは必要であり、空にすることはできません'}、同一：{field： 'confirmpassword'、メッセージ： 'パスワードとその確認は同じではありません'}、違う：{username '、メッセージ：'パスワードはusername '}}}}}}} {bemage not：' embassword：bemased： empty '}、neidical：{field：' password '、message：'パスワードとその確認は同じではありません '}、違い：{field：' username '、message：'パスワードはusername '}}}}}}}}}}}}}}}}}}}}}} {{format：' yyy/mm/dd " {notempty：{message： 'the gender is require'}}}、 '言語[]'：{validators：{message： '{quepe specifie ope on on on on on on one nableas ope ope speed quepe quee quepe quee quepe quepe quepe quee quepe quepe quepe quepe quee figness ope distifie ope spee ope distice ope distify eas ope figness ope "}}}、' program at '}}}、captcha：{validators：{callback：{message：'誤った回答 '、callback：function（value、validator）{var items = $（'＃captchaoperation '）。html（' '）。手動で$（ '＃validatebtn'）331行を見て、[送信]をクリックして使用します
$（ '＃defaultform'）。bootstrapvalidator（ 'validate'）;
トリガーフォーム検証
これが私が遭遇した落とし穴です：
BootStrapValidatorのデフォルトロジックは、フォーム検証が失敗したときにボタンをグレーアウトすることです。
ただし、プロジェクトでは、ボタンはフォーム内になく、イベントバインディングを通じてAjaxによって提出されます。それから質問は次のとおりです。
プロジェクトは、フォーム検証が失敗したときにバインドされた後続のイベントを実行しない必要があります。 Baiduは長い間関連情報を見つけることができませんでしたが、最後にGoogleに依存します。
$（ "＃yourform"） $（ "＃yourform"）
上記は、編集者がお客様に紹介したブートストラップのフォーム検証プラグインBootstrapValidatorの関連知識です。それがあなたに役立つことを願っています。ご質問がある場合は、メッセージを残してください。編集者は時間内に返信します。 wulin.comのウェブサイトへのご支援ありがとうございます！