Bootstrap表单验证插件bootstrapValidator使用方法整理
2024-05-14 04:35:19
插件介绍
先上一个图：
下载地址：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;});酱紫就可以判断表单验证是否通过了。
Bootstrap表单验证插件bootstrapValidator使用方法整理相关推荐
- Validation-jQuery表单验证插件使用方法
作用 jquery.validate是jquery旗下的一个验证框架,借助jquery的优势,我们可以迅速验证一些常见的输入,并且可以自己扩充自己的验证方法,并且对国际化也有很好的支持. 使用前的布置 ...
- bootstrap 表单验证
前言:做Web开发的我们,表单验证是再常见不过的需求了.友好的错误提示能增加用户体验.博主搜索bootstrap表单验证,搜到的结果大部分都是文中的主题:bootstrapvalidator.今天就来 ...
- 12个方便易用的jquery表单验证插件
绝大部分网站都是开放注册的,而注册就需要使用表单验证,因为网站都需要对注册用户的信息安全性和合理性做出判断,表单的注册都应该具备完善的验证方式,比如注册使用的手机号是否是真实的?用户填写的验证码是否正 ...
- 一款比较实用齐全的jQuery 表单验证插件
一款比较实用,并且验证类型齐全的jQuery表单验证插件.英文版原作者@Vanadium,由我做中文整理.E文水平有限,如果翻译的有问题的,请大家指出,在此感谢~ 可以验证哪些? 文字,日期,邮箱,网 ...
- jQuery 表单验证插件，jQuery Validation Engine用法详解
jQuery 表单验证插件,jQuery Validation Engine用法详解 功能强大的 jQuery 表单验证插件,适用于日常的 E-mail.电话号码.网址等验证及 Ajax 验证,除自身 ...
- 基于jQuery的表单验证插件：jValidate
网上基于jQuery的表单验证插件已有很多,但是这个轮子我还是继续做一个,因为这个表单验证插件是从我以前的个人JS框架移值过来的(我已慢慢投入jQuery的怀抱),并且它的验证规则书写方式也许会让你眼 ...
- jQuery学习之：Validation表单验证插件
http://polaris.blog.51cto.com/1146394/258781/ 最近由于公司决定使用AJAX + Struts2来重构项目,让我仔细研究一下这两个,然后集中给同事讲讲,让每 ...
- jquery validate表单验证插件
1 表单验证的准备工作 在开启长篇大论之前,首先将表单验证的效果展示给大家. 1.点击表单项,显示帮助提示 2.鼠标离开表单项时,开始校验元素 3.鼠标离开后的正确.错误提示及鼠标移入时的帮 ...
- html中表单的校验的插件,功能强大的jquery.validate表单验证插件
本文实例为大家分享了jquery.validate表单验证的使用方法,供大家参考,具体内容如下 1 .表单验证的准备工作 在开启长篇大论之前,首先将表单验证的效果展示给大家. 1.点击表单项,显示帮助 ...
最新文章
- CactiEZ安装配置教程
- 解决ubuntu系统中输入sudo passwd root,之后，提示输入新密码时，输不进去
- ElementUI中使用el-calendar实现基于日历的节假日的增删改查
- 英伟达显卡不同架构_英伟达新款笔记本显卡全阵容曝光：共计六款
- HLS Pargmas(2) interface
- 提高调试.net cf程序效率一些技巧
- 数学--数论--组合数（卢卡斯+扩展卢卡斯）模板
- 前端学习（1293）:系统模块path路径操作
- netty大白话--helloword（一）
- dubbo的下载与运行
- Lua-pb 升级到Lua5.3
- C#中combobox不可编辑与不可选择
- RPC框架的实现原理是什么？-开课吧
- 什么是商业智能BI和实施BI的解决方案【转】
- 北京2020积分落户名单
- mysql查询条件忽略大小写_mysql 查询条件不区分大小写问题
- Unity 使用Socket 简单实现通讯
- Chaya虚拟机学习 —— 启用Docker遇到的Bug
- 项目介绍之论文格式的自动检测与修改系统
- 跪求大神定制类似苹果助手管理软件
热门文章
- [转|整理]翻译：使用.net3.5的缓存池和SocketAsyncEventArgs类创建socket服务器
- c语言编程游戏界面,震惊！！！一个关于c语言图形化界面编程的小游戏-Go语言中文社区...
- linux文件系统逻辑,Linux系统——文件系统与LVM 逻辑
- linux虚拟网卡名不是eth0,linux不能启动虚拟网卡eth0
- java中rs怎么用_java-如何使用JAX-RS设置字符集？
- 使用小技巧教你用Selenium获取鼠标指向的元素
- linux 检索全部文件中的中文词汇,linux – 获取所有文件中的单词计数
- wp10 android,WP10能在Android机正常用不？
- java person抽象类_java 抽象类
- 无法安装此计算机不存在英特尔,win2008serverr2intel网卡驱动无法安装不存在英特尔PRO适配器的解决方法...