이 기사에서는 양식 검증의 예제 코드를 판단하는 방법을 소개합니다. 본문을 소개하기 전에 플러그인을 소개하겠습니다.
플러그인 소개
먼저 사진을 찍자 :
다운로드 주소 : https://github.com/nghuuphuoc/bootstrapvalidator
사용 팁
중국 문화 :
플러그인을 다운로드 한 후 /js/bootstrapvalidator/language/zh_cn.js를 파일에 소개합니다. 즉, 중국 문화 구현
제출 전 확인 양식 :
더 풍부한 양식 검증 예 : http://www.jq22.com/yanshi522, 코드를 직접 업로드하십시오.
<! docType html> <html> <head> <head> <title> bootstrapvalidator demo </title> <link rel = "스타일 시트"href = "vendor/bootstrap/css/bootstrap.css"/> <link rel = "Stylesheet"href ""dist/css/bootstrapvalidator "/bootstrapvalidator fontawesome css fontawesome에서 제공하는 피드백 아이콘-> <!-<link rel = "Stylesheet"href = "http://netdna.bootstrapcdn.com/font-awesome/../css/font-awesome.css"/> --> SRC = "공급 업체/jQuery/jQuery -... Min.js"> </script> <script type = "text/javaScript"src = "공급 업체/bootstrap/js/bootstrap.min.js"> </script> <script type = "text/javascript" src = "dist/js/bootstrapvalidator.js"> </script> </head> <body> <div> <div> <!-form :-> <섹션> <div> <div> <h> 가입 </h> </div> <form id = "defaultform"method = "post"action = "target"> <inphp "> <inplat" 이름 = "FirstName"placeHolder = "이름"/> </div> <div> <input type = "text"name = "lastname"placeholder = "The Shast name"/> </div> </div> <label> username </label> <div> <입력 유형 = "text"= "username"/> <label> email> email> <lable> type = "text"name = "email"/> </div> </div> </div> <div> <label> 비밀번호 </label> </label> <div> <입력 유형 = "암호"name = "password"/> </div> </div> <div> <label> 비밀번호 </label> <div> <입력 유형 = "password"name = "succippassword" /> </div> </div> <div> <label> 젠더 </label> <div> <label> <input type = "radio"name = "gender"value = "male"/> male </dable> </div> <div> <label> <입력 유형 = "radio"name = "gender"value = "female"/> female> <label> <input type = "radio" value = "기타"/> 기타 </label> </div> </div> <div> <label> 생일 </label> <div> <입력 유형 = "text"name = "생일"/> (yyy/mm/dd) </div> </div> <div> <labe> 언어 </label> <div> <labe> <입력 유형 = "checkbox" 영어 </label> </div> <label> <입력 유형 = "checkbox"name = "languages []"value = "french"/> french </label> </div> <label> <input type = "checkbox"name = "languages []"value = "독일어"/> 독일어 </label> </div> <labe> <input type = "check"check "" "" "" "" "" " 러시아어 </label> </div> <div> <label> <입력 유형 = "checkbox"name = "languages []"value = "value ="기타 "/> 다른 </label> </div> </div> <div> <label> 프로그래밍 언어 </label> <div> <div> <label> <input type"name = "program [] value ="vall " 유형 = "CheckBox"name = "value ="value = "java"/> java </laba </laba> </div> <div> <label> input type = "checkbox"name = "value ="value = "c"/> c/c ++ </label> </div> <div> <label> <input type = "checkbox"프로그램 [] value = ""/> php </label> </div> <div> <label> <입력 유형 = "checkbox"name = "program []"value = "value ="perl "/> perl </label> </div> <div> <label> <input type ="checkbox "name ="프로그램 [] "value ="ruby "/> ruby </div> <label> <intput" "checkbox" "programs"]. value = "Python"/> python </div> <div> <label> <input type = "checkbox"name = "program []"value = "python"/label> </div> <div> <label> <입력 유형 = "checkbox"name = "value ="javaScript "/> javaScript id="captchaOperation"></label><div><input type="text" name="captcha" /></div></div><div><div><button type="submit" name="signup" value="Sign up">Sign up</button><button type="submit" name="signup2" value="Sign up 2">Sign up 2</button><button type="button" id = "validatebtn"> 매뉴얼 validate </button> <button type = "button"id = "resetbtn"> reset form </div> </div> </form> </div> </section> <!-: form-> </div> </div> <script type = "text/javascript"> $ (document () {// generate () {// generate () {// {return math.floor (math.random () * (max -min + 1) + min);};}; $ ( '##captchaoperation'). html ([randomnumber (1, 100), ' +', randomnumber (1, 200), '=']. join ( ''); $ ( '#defaultform') 유효하지 않음 ', 피드백 시콘 : {valid :'Glyphicon Glyphicon-ok ', Invalid :'Glyphicon Glyphicon-remove ', Validating :'Glyphicon Glyphicon-Refresh '}, Fields : {firstName : {validaty : {Message :'이름은 필요하지 않습니다. 빈 '}}}}, lastName : {validname : {notempty : {message :'성이 필요하고 비어있을 수 없다 '}}}}}}}}}}}}}}}}}}}}}}}}}} {메시지 :'사용자 이름은 유효하지 않습니다. 6 자 미만의 30 자 미만 '}, regexp : {regexp :/aint :'regexp :/a-za-z0-9_/ .```` 사용자 이름은 알파벳 순, 번호, 도트 및 밑줄 '으로 만 구성 될 수 있습니다. 사용자 이름과 비밀번호는 서로 동일 할 수 없다 '}}}, 이메일 : {validators : {emailAddress : {메시지 :'입력은 유효한 이메일 주소 '}}}}, 비밀번호 : {validaty : {메시지 :'비밀번호 : '비밀번호 :'필드 : '메시지 확인 : 동일 '}, differ : {field :'username ', message :'비밀번호는 사용자 이름 '}}}, quickpassword : {validators : {notempty : {메시지 :'비밀번호 확인이 필요하며 '}, 동일 : {field :'password '},'field ','field '},'field '},'{fielding ''} username '}}}, 생일 : {검증자 : {date : {format :'yyyy/mm/dd ', 메시지 :'생일은 유효하지 않습니다 '}}}, 성별 : {valempty : {메시지 :'성별이 필요하다 '}},'언어 : {validator : '}}},'program [] ': {validators : {choice : {min : 2, max : 4, 메시지 :'2-4 개의 프로그래밍 언어를 선택하십시오 '}}}, captcha : {콜백 : {message :'world answer ', var eirets, val {var aiter : captcha : val ite {var aiter : valucator) {vartcha. $ ( '#captchaoperation'). html (). split ( ''), sum = parseint (items []) + parseint (items []); return value == sum;}}}}}); // 수동 $ ( '#valeatebtn'). click (function (). {$ ( '#defaultform'). bootstrapvalidator ( 'validate');}); $ ( '#resetbtn'). 클릭 (function () {$ ( '#defaultform'). data ( 'bootstrapvalidator'). resetform (true);}); </body> </html>331 줄을보고 제출, 사용을 클릭하십시오
$ ( '#defaultform'). bootstrapvalidator ( 'validate');
형태 확인을 트리거합니다
여기에 내가 만난 함정이 있습니다.
BootstrapValidator의 기본 논리는 양식 확인이 실패 할 때 단추를 회색으로 바꾸는 것입니다.
그러나 프로젝트에서 버튼은 양식 내부에 있지 않으며 이벤트 바인딩을 통해 Ajax에 의해 제출됩니다. 그런 다음 질문은 다음과 같습니다.
양식 검증이 실패 할 때 프로젝트는 바운드 후속 이벤트를 실행하지 않아도됩니다. Baidu는 오랫동안 관련 정보를 찾을 수 없었으며 마지막으로 Google에 따라 다릅니다.
$ ( "#yourform"). 제출 (function (ev) {ev.preventDefault ();}); $ ( "#제출"). on ( "click", function () {var bootstrapvalidator = $ ( "#yourform"). data ( 'bootstrapvalidator'); bootstrapvalidator.validate (); if (bootstrapvalidator.isvalid ()) $ ( "#your form"). olds (); else return;});위는 편집기가 소개 한 부트 스트랩의 양식 검증 플러그인 부트 스트랩 볼리 디터에 대한 관련 지식입니다. 나는 그것이 당신에게 도움이되기를 바랍니다. 궁금한 점이 있으면 메시지를 남겨 주시면 편집자가 제 시간에 답장을 드리겠습니다. Wulin.com 웹 사이트를 지원해 주셔서 대단히 감사합니다!