Bootstrap表单验证插件bootstrapValidator使用方…
2018-10-19 06:13:22来源：博客园 阅读 ()
插件下载：http://www.jq22.com/jquery-info522
插件介绍
先上一个图：
下载地址：https://github.com/nghuuphuoc/bootstrapvalidator
使用方法：http://www.cnblogs.com/huangcong/p/5335376.html
使用提示
中文化：
下载插件后，将\js\bootstrapValidator\language\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 <div class="container">
18 <div class="row">
19 <!-- form: -->
20 <section>
21 <div class="col-lg-8 col-lg-offset-2">
22 <div class="page-header">
23 <h2>Sign up</h2>
24 </div>
25
26 <form id="defaultForm" method="post" class="form-horizontal" action="target.php">
27 <div class="form-group">
28 <label class="col-lg-3 control-label">Full name</label>
29 <div class="col-lg-4">
30 <input type="text" class="form-control" name="firstName" placeholder="First name" />
31 </div>
32 <div class="col-lg-4">
33 <input type="text" class="form-control" name="lastName" placeholder="Last name" />
34 </div>
35 </div>
36
37 <div class="form-group">
38 <label class="col-lg-3 control-label">Username</label>
39 <div class="col-lg-5">
40 <input type="text" class="form-control" name="username" />
41 </div>
42 </div>
43
44 <div class="form-group">
45 <label class="col-lg-3 control-label">Email address</label>
46 <div class="col-lg-5">
47 <input type="text" class="form-control" name="email" />
48 </div>
49 </div>
50
51 <div class="form-group">
52 <label class="col-lg-3 control-label">Password</label>
53 <div class="col-lg-5">
54 <input type="password" class="form-control" name="password" />
55 </div>
56 </div>
57
58 <div class="form-group">
59 <label class="col-lg-3 control-label">Retype password</label>
60 <div class="col-lg-5">
61 <input type="password" class="form-control" name="confirmPassword" />
62 </div>
63 </div>
64
65 <div class="form-group">
66 <label class="col-lg-3 control-label">Gender</label>
67 <div class="col-lg-5">
68 <div class="radio">
69 <label>
70 <input type="radio" name="gender" value="male" /> Male
71 </label>
72 </div>
73 <div class="radio">
74 <label>
75 <input type="radio" name="gender" value="female" /> Female
76 </label>
77 </div>
78 <div class="radio">
79 <label>
80 <input type="radio" name="gender" value="other" /> Other
81 </label>
82 </div>
83 </div>
84 </div>
85
86 <div class="form-group">
87 <label class="col-lg-3 control-label">Birthday</label>
88 <div class="col-lg-5">
89 <input type="text" class="form-control" name="birthday" /> (YYYY/MM/DD)
90 </div>
91 </div>
92
93 <div class="form-group">
94 <label class="col-lg-3 control-label">Languages</label>
95 <div class="col-lg-5">
96 <div class="checkbox">
97 <label>
98 <input type="checkbox" name="languages[]" value="english" /> English
99 </label>
100 </div>
101 <div class="checkbox">
102 <label>
103 <input type="checkbox" name="languages[]" value="french" /> French
104 </label>
105 </div>
106 <div class="checkbox">
107 <label>
108 <input type="checkbox" name="languages[]" value="german" /> German
109 </label>
110 </div>
111 <div class="checkbox">
112 <label>
113 <input type="checkbox" name="languages[]" value="russian" /> Russian
114 </label>
115 </div>
116 <div class="checkbox">
117 <label>
118 <input type="checkbox" name="languages[]" value="other" /> Other
119 </label>
120 </div>
121 </div>
122 </div>
123
124 <div class="form-group">
125 <label class="col-lg-3 control-label">Programming Languages</label>
126 <div class="col-lg-5">
127 <div class="checkbox">
128 <label>
129 <input type="checkbox" name="programs[]" value="net" /> .Net
130 </label>
131 </div>
132 <div class="checkbox">
133 <label>
134 <input type="checkbox" name="programs[]" value="java" /> Java
135 </label>
136 </div>
137 <div class="checkbox">
138 <label>
139 <input type="checkbox" name="programs[]" value="c" /> C/C++
140 </label>
141 </div>
142 <div class="checkbox">
143 <label>
144 <input type="checkbox" name="programs[]" value="php" /> PHP
145 </label>
146 </div>
147 <div class="checkbox">
148 <label>
149 <input type="checkbox" name="programs[]" value="perl" /> Perl
150 </label>
151 </div>
152 <div class="checkbox">
153 <label>
154 <input type="checkbox" name="programs[]" value="ruby" /> Ruby
155 </label>
156 </div>
157 <div class="checkbox">
158 <label>
159 <input type="checkbox" name="programs[]" value="python" /> Python
160 </label>
161 </div>
162 <div class="checkbox">
163 <label>
164 <input type="checkbox" name="programs[]" value="javascript" /> Javascript
165 </label>
166 </div>
167 </div>
168 </div>
169
170 <div class="form-group">
171 <label class="col-lg-3 control-label" id="captchaOperation"></label>
172 <div class="col-lg-2">
173 <input type="text" class="form-control" name="captcha" />
174 </div>
175 </div>
176
177 <div class="form-group">
178 <div 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 </div>
184 </div>
185 </form>
186 </div>
187 </section>
188 <!-- :form -->
189 </div>
190 </div>
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 $('#captchaOperation').html([randomNumber(1, 100), '+', randomNumber(1, 200), '='].join(' '));
199
200 $('#defaultForm').bootstrapValidator({
201 // live: 'disabled',
202 message: 'This value is not valid',
203 feedbackIcons: {
204 valid: 'glyphicon glyphicon-ok',
205 invalid: 'glyphicon glyphicon-remove',
206 validating: 'glyphicon glyphicon-refresh'
207 },
208 fields: {
209 firstName: {
210 validators: {
211 notEmpty: {
212 message: 'The first name is required and cannot be empty'
213 }
214 }
215 },
216 lastName: {
217 validators: {
218 notEmpty: {
219 message: 'The last name is required and cannot be empty'
220 }
221 }
222 },
223 username: {
224 message: 'The username is not valid',
225 validators: {
226 notEmpty: {
227 message: 'The username is required and cannot be empty'
228 },
229 stringLength: {
230 min: 6,
231 max: 30,
232 message: 'The username must be more than 6 and less than 30 characters long'
233 },
234 regexp: {
235 regexp: /^[a-zA-Z0-9_\.]+$/,
236 message: 'The username can only consist of alphabetical, number, dot and underscore'
237 },
238 remote: {
239 url: 'remote.php',
240 message: 'The username is not available'
241 },
242 different: {
243 field: 'password',
244 message: 'The username and password cannot be the same as each other'
245 }
246 }
247 },
248 email: {
249 validators: {
250 emailAddress: {
251 message: 'The input is not a valid email address'
252 }
253 }
254 },
255 password: {
256 validators: {
257 notEmpty: {
258 message: 'The password is required and cannot be empty'
259 },
260 identical: {
261 field: 'confirmPassword',
262 message: 'The password and its confirm are not the same'
263 },
264 different: {
265 field: 'username',
266 message: 'The password cannot be the same as username'
267 }
268 }
269 },
270 confirmPassword: {
271 validators: {
272 notEmpty: {
273 message: 'The confirm password is required and cannot be empty'
274 },
275 identical: {
276 field: 'password',
277 message: 'The password and its confirm are not the same'
278 },
279 different: {
280 field: 'username',
281 message: 'The password cannot be the same as username'
282 }
283 }
284 },
285 birthday: {
286 validators: {
287 date: {
288 format: 'YYYY/MM/DD',
289 message: 'The birthday is not valid'
290 }
291 }
292 },
293 gender: {
294 validators: {
295 notEmpty: {
296 message: 'The gender is required'
297 }
298 }
299 },
300 'languages[]': {
301 validators: {
302 notEmpty: {
303 message: 'Please specify at least one language you can speak'
304 }
305 }
306 },
307 'programs[]': {
308 validators: {
309 choice: {
310 min: 2,
311 max: 4,
312 message: 'Please choose 2 - 4 programming languages you are good at'
313 }
314 }
315 },
316 captcha: {
317 validators: {
318 callback: {
319 message: 'Wrong answer',
320 callback: function(value, validator) {
321 var items = $('#captchaOperation').html().split(' '), sum = parseInt(items[0]) + parseInt(items[2]);
322 return value == sum;
323 }
324 }
325 }
326 }
327 }
328 });
329
330 // Validate the form manually
331 $('#validateBtn').click(function() {
332 $('#defaultForm').bootstrapValidator('validate');
333 });
334
335 $('#resetBtn').click(function() {
336 $('#defaultForm').data('bootstrapValidator').resetForm(true);
337 });
338 });
339 </script>
340 </body>
341 </html>
看331行，点击提交时，用
$('#defaultForm').bootstrapValidator('validate');
触发表单验证
下面是碰到的一个坑：
bootstrapValidator默认逻辑是当表单验证失败时，把按钮给变灰色。
但是项目中，button并不在form内部，是通过事件绑定来ajax提交的。那么问题来了：
项目需要当form验证失败时，不执行所绑定的后续事件。百度半天找不到相关资料，最后还是要靠google：
$("#yourform").submit(function(ev){ev.preventDefault();});
$("#submit").on("click", function(){
var bootstrapValidator = $("#yourform").data('bootstrapValidator');
bootstrapValidator.validate();
if(bootstrapValidator.isValid())
$("#yourform").submit();
else return;
});
酱紫就可以判断表单验证是否通过了。
标签：
版权申明：本站文章部分自网络，如有侵权，请联系：west999com@outlook.com
特别注意：本站所有转载文章言论不代表本站观点，本站所提供的摄影照片，插画，设计作品，如需使用，请与原作者联系，版权归原作者所有
相关文章
- HTML基础02 2020-06-09
- HTML表单标签 2020-05-27
- 阻止表单的默认提交事件 2020-05-23
- form提交表单时，action携带参数（form跳转页面时在rul中拼 2020-05-01
- Bootstrap 滚动监听+小工具+Flex（弹性）布局+多媒体对象 2020-04-20
IDC资讯： 主机资讯 注册资讯 托管资讯 vps资讯 网站建设
网站运营： 建站经验 策划盈利 搜索优化 网站推广 免费资源
网络编程： Asp.Net编程 Asp编程 Php编程 Xml编程 Access Mssql Mysql 其它
服务器技术： Web服务器 Ftp服务器 Mail服务器 Dns服务器 安全防护
软件技巧： 其它软件 Word Excel Powerpoint Ghost Vista QQ空间 QQ FlashGet 迅雷
网页制作： FrontPages Dreamweaver Javascript css photoshop fireworks Flash
热门词条
最新资讯
热门关注
热门标签