지역 사회 배우다 도구 라이브러리 여가
찾다
한국어
집 > 웹 프론트엔드 > JS 튜토리얼 > Bootstrap에서 양식 유효성 검사 플러그인 bootstrapValidator를 사용하는 방법은 무엇입니까? (코드 예)

Bootstrap에서 양식 유효성 검사 플러그인 bootstrapValidator를 사용하는 방법은 무엇입니까? (코드 예)

青灯夜游
풀어 주다： 2018-10-19 15:25:57
앞으로
3876명이 탐색했습니다.

이 글의 내용은 Bootstrap에서 양식 검증 플러그인 bootstrapValidator를 사용하는 방법을 소개하는 것입니다. 도움이 필요한 친구들이 참고할 수 있기를 바랍니다. 더 많은 부트스트랩 관련 튜토리얼을 배우고 얻으려면 부트스트랩 튜토리얼을 방문하세요!

플러그인 다운로드 : http://www.jq22.com/jquery-info522

플러그인 소개

첫번째 사진 :


다운로드 주소 : https://github.com /nghuuphuoc /bootstrapvalidator

사용 방법: http://www.cnblogs.com/huangcong/p/5335376.html

사용 팁

중국 문화:
플러그인을 다운로드한 후 jsbootstrapValidator언어zh_CN.js를 소개하세요. 즉, 구현 문화

제출 전 확인 양식:
더 풍부한 양식 확인 예: http://www.jq22.com/yanshi522, 코드로 직접 이동: 

1 <!DOCTYPE html>
  2 <html>
  3 <head>
  4     <title>BootstrapValidator demo</title>
  5 
  6     <link rel="stylesheet" href="vendor/bootstrap/css/bootstrap.css"/>
  7     <link rel="stylesheet" href="dist/css/bootstrapValidator.css"/>
  8 
  9     <!-- Include the FontAwesome CSS if you want to use feedback icons provided by FontAwesome -->
 10     <!--<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" />-->
 11 
 12     <script type="text/javascript" src="vendor/jquery/jquery-1.10.2.min.js"></script>
 13     <script type="text/javascript" src="vendor/bootstrap/js/bootstrap.min.js"></script>
 14     <script type="text/javascript" src="dist/js/bootstrapValidator.js"></script>
 15 </head>
 16 <body>
 17     <p class="container">
 18         <p class="row">
 19             <!-- form: -->
 20             <section>
 21                 <p class="col-lg-8 col-lg-offset-2">
 22                     <p class="page-header">
 23                         <h2>Sign up</h2>
 24                     </p>
 25 
 26                     <form id="defaultForm" method="post" class="form-horizontal" action="target.php">
 27                         <p class="form-group">
 28                             <label class="col-lg-3 control-label">Full name</label>
 29                             <p class="col-lg-4">
 30                                 <input type="text" class="form-control" name="firstName" placeholder="First name" />
 31                             </p>
 32                             <p class="col-lg-4">
 33                                 <input type="text" class="form-control" name="lastName" placeholder="Last name" />
 34                             </p>
 35                         </p>
 36 
 37                         <p class="form-group">
 38                             <label class="col-lg-3 control-label">Username</label>
 39                             <p class="col-lg-5">
 40                                 <input type="text" class="form-control" name="username" />
 41                             </p>
 42                         </p>
 43 
 44                         <p class="form-group">
 45                             <label class="col-lg-3 control-label">Email address</label>
 46                             <p class="col-lg-5">
 47                                 <input type="text" class="form-control" name="email" />
 48                             </p>
 49                         </p>
 50 
 51                         <p class="form-group">
 52                             <label class="col-lg-3 control-label">Password</label>
 53                             <p class="col-lg-5">
 54                                 <input type="password" class="form-control" name="password" />
 55                             </p>
 56                         </p>
 57 
 58                         <p class="form-group">
 59                             <label class="col-lg-3 control-label">Retype password</label>
 60                             <p class="col-lg-5">
 61                                 <input type="password" class="form-control" name="confirmPassword" />
 62                             </p>
 63                         </p>
 64 
 65                         <p class="form-group">
 66                             <label class="col-lg-3 control-label">Gender</label>
 67                             <p class="col-lg-5">
 68                                 <p class="radio">
 69                                     <label>
 70                                         <input type="radio" name="gender" value="male" /> Male
 71                                     </label>
 72                                 </p>
 73                                 <p class="radio">
 74                                     <label>
 75                                         <input type="radio" name="gender" value="female" /> Female
 76                                     </label>
 77                                 </p>
 78                                 <p class="radio">
 79                                     <label>
 80                                         <input type="radio" name="gender" value="other" /> Other
 81                                     </label>
 82                                 </p>
 83                             </p>
 84                         </p>
 85 
 86                         <p class="form-group">
 87                             <label class="col-lg-3 control-label">Birthday</label>
 88                             <p class="col-lg-5">
 89                                 <input type="text" class="form-control" name="birthday" /> (YYYY/MM/DD)
 90                             </p>
 91                         </p>
 92 
 93                         <p class="form-group">
 94                             <label class="col-lg-3 control-label">Languages</label>
 95                             <p class="col-lg-5">
 96                                 <p class="checkbox">
 97                                     <label>
 98                                         <input type="checkbox" name="languages[]" value="english" /> English
 99                                     </label>
100                                 </p>
101                                 <p class="checkbox">
102                                     <label>
103                                         <input type="checkbox" name="languages[]" value="french" /> French
104                                     </label>
105                                 </p>
106                                 <p class="checkbox">
107                                     <label>
108                                         <input type="checkbox" name="languages[]" value="german" /> German
109                                     </label>
110                                 </p>
111                                 <p class="checkbox">
112                                     <label>
113                                         <input type="checkbox" name="languages[]" value="russian" /> Russian
114                                     </label>
115                                 </p>
116                                 <p class="checkbox">
117                                     <label>
118                                         <input type="checkbox" name="languages[]" value="other" /> Other
119                                     </label>
120                                 </p>
121                             </p>
122                         </p>
123 
124                         <p class="form-group">
125                             <label class="col-lg-3 control-label">Programming Languages</label>
126                             <p class="col-lg-5">
127                                 <p class="checkbox">
128                                     <label>
129                                         <input type="checkbox" name="programs[]" value="net" /> .Net
130                                     </label>
131                                 </p>
132                                 <p class="checkbox">
133                                     <label>
134                                         <input type="checkbox" name="programs[]" value="java" /> Java
135                                     </label>
136                                 </p>
137                                 <p class="checkbox">
138                                     <label>
139                                         <input type="checkbox" name="programs[]" value="c" /> C/C++
140                                     </label>
141                                 </p>
142                                 <p class="checkbox">
143                                     <label>
144                                         <input type="checkbox" name="programs[]" value="php" /> PHP
145                                     </label>
146                                 </p>
147                                 <p class="checkbox">
148                                     <label>
149                                         <input type="checkbox" name="programs[]" value="perl" /> Perl
150                                     </label>
151                                 </p>
152                                 <p class="checkbox">
153                                     <label>
154                                         <input type="checkbox" name="programs[]" value="ruby" /> Ruby
155                                     </label>
156                                 </p>
157                                 <p class="checkbox">
158                                     <label>
159                                         <input type="checkbox" name="programs[]" value="python" /> Python
160                                     </label>
161                                 </p>
162                                 <p class="checkbox">
163                                     <label>
164                                         <input type="checkbox" name="programs[]" value="javascript" /> Javascript
165                                     </label>
166                                 </p>
167                             </p>
168                         </p>
169 
170                         <p class="form-group">
171                             <label class="col-lg-3 control-label" id="captchaOperation"></label>
172                             <p class="col-lg-2">
173                                 <input type="text" class="form-control" name="captcha" />
174                             </p>
175                         </p>
176 
177                         <p class="form-group">
178                             <p class="col-lg-9 col-lg-offset-3">
179                                 <button type="submit" class="btn btn-primary" name="signup" value="Sign up">Sign up</button>
180                                 <button type="submit" class="btn btn-primary" name="signup2" value="Sign up 2">Sign up 2</button>
181                                 <button type="button" class="btn btn-info" id="validateBtn">Manual validate</button>
182                                 <button type="button" class="btn btn-info" id="resetBtn">Reset form</button>
183                             </p>
184                         </p>
185                     </form>
186                 </p>
187             </section>
188             <!-- :form -->
189         </p>
190     </p>
191 
192 <script type="text/javascript">
193 $(document).ready(function() {
194     // Generate a simple captcha
195     function randomNumber(min, max) {
196         return Math.floor(Math.random() * (max - min + 1) + min);
197     };
198     $(&#39;#captchaOperation&#39;).html([randomNumber(1, 100), &#39;+&#39;, randomNumber(1, 200), &#39;=&#39;].join(&#39; &#39;));
199 
200     $(&#39;#defaultForm&#39;).bootstrapValidator({
201 //        live: &#39;disabled&#39;,
202         message: &#39;This value is not valid&#39;,
203         feedbackIcons: {
204             valid: &#39;glyphicon glyphicon-ok&#39;,
205             invalid: &#39;glyphicon glyphicon-remove&#39;,
206             validating: &#39;glyphicon glyphicon-refresh&#39;
207         },
208         fields: {
209             firstName: {
210                 validators: {
211                     notEmpty: {
212                         message: &#39;The first name is required and cannot be empty&#39;
213                     }
214                 }
215             },
216             lastName: {
217                 validators: {
218                     notEmpty: {
219                         message: &#39;The last name is required and cannot be empty&#39;
220                     }
221                 }
222             },
223             username: {
224                 message: &#39;The username is not valid&#39;,
225                 validators: {
226                     notEmpty: {
227                         message: &#39;The username is required and cannot be empty&#39;
228                     },
229                     stringLength: {
230                         min: 6,
231                         max: 30,
232                         message: &#39;The username must be more than 6 and less than 30 characters long&#39;
233                     },
234                     regexp: {
235                         regexp: /^[a-zA-Z0-9_\.]+$/,
236                         message: &#39;The username can only consist of alphabetical, number, dot and underscore&#39;
237                     },
238                     remote: {
239                         url: &#39;remote.php&#39;,
240                         message: &#39;The username is not available&#39;
241                     },
242                     different: {
243                         field: &#39;password&#39;,
244                         message: &#39;The username and password cannot be the same as each other&#39;
245                     }
246                 }
247             },
248             email: {
249                 validators: {
250                     emailAddress: {
251                         message: &#39;The input is not a valid email address&#39;
252                     }
253                 }
254             },
255             password: {
256                 validators: {
257                     notEmpty: {
258                         message: &#39;The password is required and cannot be empty&#39;
259                     },
260                     identical: {
261                         field: &#39;confirmPassword&#39;,
262                         message: &#39;The password and its confirm are not the same&#39;
263                     },
264                     different: {
265                         field: &#39;username&#39;,
266                         message: &#39;The password cannot be the same as username&#39;
267                     }
268                 }
269             },
270             confirmPassword: {
271                 validators: {
272                     notEmpty: {
273                         message: &#39;The confirm password is required and cannot be empty&#39;
274                     },
275                     identical: {
276                         field: &#39;password&#39;,
277                         message: &#39;The password and its confirm are not the same&#39;
278                     },
279                     different: {
280                         field: &#39;username&#39;,
281                         message: &#39;The password cannot be the same as username&#39;
282                     }
283                 }
284             },
285             birthday: {
286                 validators: {
287                     date: {
288                         format: &#39;YYYY/MM/DD&#39;,
289                         message: &#39;The birthday is not valid&#39;
290                     }
291                 }
292             },
293             gender: {
294                 validators: {
295                     notEmpty: {
296                         message: &#39;The gender is required&#39;
297                     }
298                 }
299             },
300             &#39;languages[]&#39;: {
301                 validators: {
302                     notEmpty: {
303                         message: &#39;Please specify at least one language you can speak&#39;
304                     }
305                 }
306             },
307             &#39;programs[]&#39;: {
308                 validators: {
309                     choice: {
310                         min: 2,
311                         max: 4,
312                         message: &#39;Please choose 2 - 4 programming languages you are good at&#39;
313                     }
314                 }
315             },
316             captcha: {
317                 validators: {
318                     callback: {
319                         message: &#39;Wrong answer&#39;,
320                         callback: function(value, validator) {
321                             var items = $(&#39;#captchaOperation&#39;).html().split(&#39; &#39;), sum = parseInt(items[0]) + parseInt(items[2]);
322                             return value == sum;
323                         }
324                     }
325                 }
326             }
327         }
328     });
329 
330     // Validate the form manually
331     $(&#39;#validateBtn&#39;).click(function() {
332         $(&#39;#defaultForm&#39;).bootstrapValidator(&#39;validate&#39;);
333     });
334 
335     $(&#39;#resetBtn&#39;).click(function() {
336         $(&#39;#defaultForm&#39;).data(&#39;bootstrapValidator&#39;).resetForm(true);
337     });
338 });
339 </script>
340 </body>
341 </html>
로그인 후 복사

라인 331을 보세요. , 제출을 클릭할 때 

$(&#39;#defaultForm&#39;).bootstrapValidator(&#39;validate&#39;);　
로그인 후 복사

양식 유효성 검사 트리거

여기에 직면하게 되는 함정이 있습니다:

bootstrapValidator의 기본 논리는 양식 유효성 검사가 실패할 때 버튼을 회색으로 바꾸는 것입니다.
하지만 프로젝트에서는 버튼이 폼 내부에 있지 않고 이벤트 바인딩을 통해 Ajax를 통해 제출됩니다. 그러면 문제가 발생합니다.

프로젝트는 양식 확인이 실패할 때 바인딩된 후속 이벤트를 실행하지 않아야 합니다. Baidu는 오랫동안 관련 정보를 찾을 수 없었고 결국 Google에 의존해야 했습니다. 

$("#yourform").submit(function(ev){ev.preventDefault();});
$("#submit").on("click", function(){

   var bootstrapValidator = $("#yourform").data(&#39;bootstrapValidator&#39;);
   bootstrapValidator.validate();
   if(bootstrapValidator.isValid())
     $("#yourform").submit();
   else return;

});
로그인 후 복사

Jiang Zi는 양식 확인의 통과 여부를 확인할 수 있습니다.

위 내용은 Bootstrap에서 양식 유효성 검사 플러그인 bootstrapValidator를 사용하는 방법은 무엇입니까? (코드 예)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

관련 라벨：
bootstrap 插件 表单验证
원천：cnblogs.com
이전 기사：ES6의 Generator 자동 실행에 대한 자세한 설명 다음 기사：JavaScript 오류 처리 메커니즘 소개(예제 포함)
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
저자별 최신 기사
최신 이슈
페이지가 갑자기 CSS나 부트스트랩을 가져올 수 없습니다. 그래서 저는 페이지를 개발 중입니다. 어제 일부 작업을 했는데 잘 작동했고, 오늘은 나머지 작업을 계속했는데 모든 것이 괜찮습니다. 일반 HTML 페이지로 열려고...
에서 2024-04-06 21:58:04
0
1
800
CSS에서 페이지 하단의 신비한 공백을 해결하는 방법 Bootstrap과 D3를 사용하여 간단한 웹페이지를 구축하려고 하는데 하단의 공백을 모두 없애는 방법을 모르겠습니다. 나는 그것을 제거하고 싶다. 본문과 HTM...
에서 2024-04-06 20:22:15
0
1
454
CollapseDisplay 클래스를 사용하여 Bootstrap 아코디언 헤더의 모양을 사용자 정의하세요. 클래스 Collapseshow를 사용하여 패널의 카드 제목 스타일을 지정하고 싶습니다. 이 예에서는 첫 번째 패널입니다. CSS를 사용하여 .accordion.c...
에서 2024-04-06 12:53:11
0
1
376
웹 페이지 크기를 조정할 때 부트스트랩 스위치가 제대로 작동하지 않습니다. 这是代码：<navxmlns:sec="http://www.thymeleaf.org/extras/spring-security"class=&qu...
에서 2024-04-05 08:45:39
0
1
3443
Laravel의 Bootstrap 모드로 AWS PDF 파일 표시 https://xxx-xx-dev.s3.ap-south-1.amazonaws.com/std_check/6557122022151745398XtquBSY.pdf와 같...
에서 2024-04-04 22:16:18
0
1
1450
관련 주제
더>
인기 추천
인기 튜토리얼
더>
관련 튜토리얼
인기 추천
최신 강좌
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿