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> </body> <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 handlerSubmit = function() { <br> $('.form-horizontal').validate({ <br> errorElement: 'span', <br> errorClass: 'help-block', <br> focusInvalid : false, <br> 규칙 : { <br> 이름 : { <br> 필수: 참 <br> }, <br> 비밀번호 : { <br> 필수: 참 <br> }, <br> 소개 : { <br> 필수: 참 <br> } <br> }, <br> 메시지: { <br> 이름 : { <br> 필수 : "사용자 이름이 필요합니다." <br> }, <br> 비밀번호 : { <br> 필수 : "비밀번호가 필요합니다." <br> }, <br> 소개 : { <br> 필수 : "소개가 필요합니다." <br> } <br> }, <br> 하이라이트 : 함수(요소) { <br> $(element).closest('.form-group').addClass('has-error'); <br> }, <br> 성공 : 함수(라벨) { <br> label.closest('.form-group').removeClass('has-error'); <br> label.remove(); <br> }, <br> errorPlacement : 함수(오류, 요소) { <br> element.parent('div').append(error); <br> }, <br> submitHandler : 함수(양식) { <br> 양식.제출(); <br> } <br> }); <br> $('.form-horizontal input').keypress(function(e) { <br> if (e.which == 13) { <br>If ($('.form-horizontal').validate().form()) { <br> $('.form-horizontal').submit() <br> ~ false 반환; ~ }); <br> } <br> 반환 { <br> 초기화 : 함수() { <br> handlerSubmit(); ~ }; }(); <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>