Bootstrap jQuery.validate に基づくフォームフォーム検証実践プロジェクトの構造: github のソースコードアドレス: https://github.com/starzou/front-end-example 1. フォームコード[html] コードをコピー コードは次のとおりです: Bootstrap Form Template Form 示例 Name Password Intro Gender boy gril Hobby Music Game option1 option3 option3 Select 1 2 3 送信 ボタン> リセット ボタン> フォーム> <br /> MyValidator.init(); <br /> </スクリプト> <br> </ボディ> <br> </html> <br> </div> <p> 参照が必要jquery.js、bootstrap.js、jquery.validate.js 库</p> <p>2、form.js代[javascript]<br> </p> <p></p> <div class="codetitle"> <span><a style="CURSOR: pointer" data="62351" class="copybut" id="copybut62351" onclick="doCopy('code62351')"><u>复制代码</u></a></span>代码如下:</div> <div class="codebody" id="code62351"> <br> var MyValidator = function() { <br> var handleSubmit = function() { <br> $('.form-horizontal').validate({ <br> errorElement : 'span', <br> errorClass : 'help-block', <br> focusInvalid : false、<br> ルール: { <br> 名前: { <br> 必須: true <br> }、<br> パスワード: { <br> 必須: true <br> }、<br> イントロ : { <br> 必須: true <br> } <br> }、<br> メッセージ: { <br> 名前: { <br> required : "ユーザー名は必須です。" <br> }、<br> パスワード: { <br> required : 「パスワードが必要です。」 <br> }、<br> イントロ : { <br> required : 「イントロは必須です。」 <br> } <br> }、<br> ハイライト : function(element) { <br> $(element).closest('.form-group').addClass('has-error'); <br> }、<br> 成功 : 関数(ラベル) { <br> label.closest('.form-group').removeClass('has-error'); <br> label.remove(); <br> }、<br> errorPlacement : function(error, element) { <br> element.parent('div').append(error); <br> }、<br> submitHandler : function(form) { <br> form.submit(); <br> } <br> }); <br> $('.form-horizontal input').keypress(function(e) { <br> if (e.that == 13) { <br>If ($('.form-horizontal').validate().form()) { <br> $('.form-horizontal').submit(); false を返す; });<br> } <br> リターン { <br> init : function() { <br> handleSubmit(); }; <br> }(); <br> <br><br> <br>効果: <br> <br><br> </div> <p></p> <p><img alt="" src="http://files.jb51.net/file_images/article/201412/2014121609363213.jpg"></p> <p><img alt="" src="http://files.jb51.net/file_images/article/201412/2014121609363214.jpg"></p> <p>フォーム検証用の非常に優れた特殊効果です。友人は自由に美化して自分のプロジェクトに使用できます。 <img alt="" src="http://files.jb51.net/file_images/article/201412/2014121609363215.jpg"></p>