이 기사에서는 Twitter에서 만든 Bootstrapvalidator.js를 권장합니다. 부트 스트랩은 트위터에서 만들어 지므로 원래 유효성 검사기를 사용하는 것이 더 신뢰할 수 있습니다. Baidu에는 Bootstrapvalidator를 검색하기위한 많은 모델이 있지만 이것 만 권장합니다.
1. 봐
간단한 소개를 위해서는 여기에 빈 수표 만 있습니다.
Bootstrapvalidator 공식 다운로드 주소
2. 자원 참조
리소스 패키지를 다운로드 한 후 다음 디렉토리를 볼 수 있습니다.
그런 다음 다음 세 파일을 프로젝트에 소개하십시오.
<link type = "text/css"rel = "스타일 시트"href = "$ {ctx}/components/validate/css/bootstrapvalidator.css"/> <script type = "text/javaScript" src = "$ {ctx}/components/validate/js/bootstrapvalidator.js"> </script> <script 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> <label> 계정 </label> intut type = "text"autofocus name = "username"placeholder = "멤Data-BV-Notempty는 멤버 번호가 빈 점검으로 사용되어야 함을 의미합니다.
양식 그룹의 div가 필요합니다. 그렇지 않으면 "너무 많은 재귀"오류 가보고됩니다.
양식 양식을 제출하면 ValidAcallback 메소드가 실행됩니다. 이 방법은 5 단계에 구체적으로 도입됩니다.
4. 페이지로드 후 부트 스트랩 유효성 검사기를 활성화합니다
$ (function () {// formate $ ( "form.required-validate"). 각 (function () {var $ form = $ (this); $ form.bootstrapValidator (); // bootstrap validator는 버그를 Server form.on ( 'success.form.bv', fortion (e))에 반복적으로 복용합니다. }));양식 양식에 'class = "require-Validate"'속성을 추가 한 다음 jQuery를 통해 해당 양식을 얻고 기본 부트 스트랩 볼리 디터로드를 수행하십시오.
위의 코드에 댓글을 달린 일부 코드에주의를 기울이십시오. 자세한 내용은 BootstrapValidator가 제출 한 버그를 반복적으로 수정하려면 다음을 참조하십시오. 특정 내용은 다음과 같습니다
Bootstrapvalidator는 매우 아름답지만 종종 아름다운 얼굴 아래에 숨겨져있는 살인 의도가 있습니다. 이것이 반복되는 제출 버그가 있는 이유입니다.
해결책:
// formate $ ( "form.required-validate", $ p) .Each (function () {var $ form = $ (this); $ form.bootstrapValidator (). on ( 'success.form.bv', function (e) {// Committing E.PreventDefault ();});});Bootstrapvalidator의 ON 메소드를 설정하고, 키는 성공입니다. form.bv 및 값은 e.preventDefault ();.
버그 조사 :
설문 조사 결과 :
1. 부트 스트랩 볼리 디터를 사용하지 않으면 그림과 같이 문제가 없습니다.
2. 처음으로 클릭하면 제출물이 두 번 반복됩니다. 그런 다음 사용자 이름을 다시 입력 한 후 한 번에 제출합니다.
버그는 환경이 발생합니다.
다음과 같이 코드를 복사하십시오.
...
<버튼 유형 = "제출"> 제출 </button>
</form>
설명하다:
이것은 조치에 요청 주소가있는 일반적인 양식이며, 양식을 확인한 다음 요청을 보내고 마지막으로 tabajaxdone 메소드를 호출하는 양식에 onsubmit 메소드가 있습니다.
버그 분석 :
1. 양식에는 확실히 문제가 없습니다. 부트 스트랩 검증이 없으면 전혀 문제가 없습니다.
2. 이전에 jQuery Validate를 사용할 때 문제가 없었습니다.
3. 그러면 부트 스트랩 검증에서만 문제가 발생할 수 있습니다.
4. Bootstrap Validate의 기본 사용에는 문제가 없습니다. 첫 번째 클릭 제출은 반복되므로 반복되기 때문입니다.
5. 그러면 Bootstrap Validate에는 기본 제출 요청이 있습니다.
Validate Object를 다시 보면 기본적으로 많은 이벤트가 있음을 알 수 있습니다. 그중에 Formsuccess가 가장 의심 스럽습니다. 즉, 제출 요청이 다시 트리거 될 수 있습니다.
버그 디버깅 :
// 양식 $ ( "form.required-validate", $ p) .Each (function () {var $ form = $ (this); $ form.bootstrapvalidator (); // .on ( 'success.form.bv', function (e) {// // e.preventDefault (); //});});1. 페이지가 처음으로로드되면 프론트 엔드 데이터 검증을 수행하기 전에 BootstrapValidator를 위의 방법에로드해야합니다.
2. 당신은 주석은 코드를 보았을 것입니다. 맞습니다.이 이벤트 처리를 추가하여 e.preventDefault ()를 형성하고 사용하십시오. 기본 이벤트 제출을 방지합니다.
5. 양식을 제출할 때 항목을 확인하십시오
함수 validAteCallback (양식, 콜백, 확인) {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"), data : $ form.serializearray (), "json", "cache : false : success : 콜백 || yunm.ajaxdone, error : yunm.ajaxerror}); 거짓 반환;}ValidAteCallback에서 양식 양식을 얻은 후, 양식은 ISValid 메소드를 통해 반환하여 통과 여부를 확인할 수 있습니다.
양식 확인이 전달되면 Ajax를 통해 서버에 양식을 제출하십시오.
여전히 심도있게 공부하고 싶다면 여기를 클릭하여 3 가지 흥미로운 주제를 공부하고 첨부 할 수 있습니다.
부트 스트랩 학습 튜토리얼
부트 스트랩 실용 튜토리얼
부트 스트랩 플러그인 사용 튜토리얼
위의 내용은이 기사에 관한 모든 것입니다. 모든 사람의 학습에 도움이되기를 바랍니다.