Bootstrap中的表单验证插件bootstrapValidator使用方法整理(推荐)


Posted in Javascript onJune 21, 2016

本文给大家介绍如何判断表单验证的实例代码,在没给大家介绍正文之前,先给大家介绍下插件。

插件介绍

先上一个图:

Bootstrap中的表单验证插件bootstrapValidator使用方法整理(推荐)
Bootstrap中的表单验证插件bootstrapValidator使用方法整理(推荐)

下载地址:https://github.com/nghuuphuoc/bootstrapvalidator

使用提示

中文化:

下载插件后,将\js\bootstrapValidator\language\zh_CN.js 引入文件,即实现中文化

提交前验证表单:

更丰富一点的表单验证例子:http://www.jq22.com/yanshi522,直接上代码:

<!DOCTYPE html>
<html>
<head>
<title>BootstrapValidator demo</title>
<link rel="stylesheet" href="vendor/bootstrap/css/bootstrap.css"/>
<link rel="stylesheet" href="dist/css/bootstrapValidator.css"/>
<!-- Include the FontAwesome CSS if you want to use feedback icons provided by FontAwesome -->
<!--<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/font-awesome/../css/font-awesome.css" />-->
<script type="text/javascript" src="vendor/jquery/jquery-...min.js"></script>
<script type="text/javascript" src="vendor/bootstrap/js/bootstrap.min.js"></script>
<script type="text/javascript" src="dist/js/bootstrapValidator.js"></script>
</head>
<body>
<div class="container">
<div class="row">
<!-- form: -->
<section>
<div class="col-lg- col-lg-offset-">
<div class="page-header">
<h>Sign up</h>
</div>
<form id="defaultForm" method="post" class="form-horizontal" action="target.php">
<div class="form-group">
<label class="col-lg- control-label">Full name</label>
<div class="col-lg-">
<input type="text" class="form-control" name="firstName" placeholder="First name" />
</div>
<div class="col-lg-">
<input type="text" class="form-control" name="lastName" placeholder="Last name" />
</div>
</div>
<div class="form-group">
<label class="col-lg- control-label">Username</label>
<div class="col-lg-">
<input type="text" class="form-control" name="username" />
</div>
</div>
<div class="form-group">
<label class="col-lg- control-label">Email address</label>
<div class="col-lg-">
<input type="text" class="form-control" name="email" />
</div>
</div>
<div class="form-group">
<label class="col-lg- control-label">Password</label>
<div class="col-lg-">
<input type="password" class="form-control" name="password" />
</div>
</div>
<div class="form-group">
<label class="col-lg- control-label">Retype password</label>
<div class="col-lg-">
<input type="password" class="form-control" name="confirmPassword" />
</div>
</div>
<div class="form-group">
<label class="col-lg- control-label">Gender</label>
<div class="col-lg-">
<div class="radio">
<label>
<input type="radio" name="gender" value="male" /> Male
</label>
</div>
<div class="radio">
<label>
<input type="radio" name="gender" value="female" /> Female
</label>
</div>
<div class="radio">
<label>
<input type="radio" name="gender" value="other" /> Other
</label>
</div>
</div>
</div>
<div class="form-group">
<label class="col-lg- control-label">Birthday</label>
<div class="col-lg-">
<input type="text" class="form-control" name="birthday" /> (YYYY/MM/DD)
</div>
</div>
<div class="form-group">
<label class="col-lg- control-label">Languages</label>
<div class="col-lg-">
<div class="checkbox">
<label>
<input type="checkbox" name="languages[]" value="english" /> English
</label>
</div>
<div class="checkbox">
<label>
<input type="checkbox" name="languages[]" value="french" /> French
</label>
</div>
<div class="checkbox">
<label>
<input type="checkbox" name="languages[]" value="german" /> German
</label>
</div>
<div class="checkbox">
<label>
<input type="checkbox" name="languages[]" value="russian" /> Russian
</label>
</div>
<div class="checkbox">
<label>
<input type="checkbox" name="languages[]" value="other" /> Other
</label>
</div>
</div>
</div>
<div class="form-group">
<label class="col-lg- control-label">Programming Languages</label>
<div class="col-lg-">
<div class="checkbox">
<label>
<input type="checkbox" name="programs[]" value="net" /> .Net
</label>
</div>
<div class="checkbox">
<label>
<input type="checkbox" name="programs[]" value="java" /> Java
</label>
</div>
<div class="checkbox">
<label>
<input type="checkbox" name="programs[]" value="c" /> C/C++
</label>
</div>
<div class="checkbox">
<label>
<input type="checkbox" name="programs[]" value="php" /> PHP
</label>
</div>
<div class="checkbox">
<label>
<input type="checkbox" name="programs[]" value="perl" /> Perl
</label>
</div>
<div class="checkbox">
<label>
<input type="checkbox" name="programs[]" value="ruby" /> Ruby
</label>
</div>
<div class="checkbox">
<label>
<input type="checkbox" name="programs[]" value="python" /> Python
</label>
</div>
<div class="checkbox">
<label>
<input type="checkbox" name="programs[]" value="javascript" /> Javascript
</label>
</div>
</div>
</div>
<div class="form-group">
<label class="col-lg-3 control-label" id="captchaOperation"></label>
<div class="col-lg-2">
<input type="text" class="form-control" name="captcha" />
</div>
</div>
<div class="form-group">
<div class="col-lg-9 col-lg-offset-3">
<button type="submit" class="btn btn-primary" name="signup" value="Sign up">Sign up</button>
<button type="submit" class="btn btn-primary" name="signup2" value="Sign up 2">Sign up 2</button>
<button type="button" class="btn btn-info" id="validateBtn">Manual validate</button>
<button type="button" class="btn btn-info" id="resetBtn">Reset form</button>
</div>
</div>
</form>
</div>
</section>
<!-- :form -->
</div>
</div>
<script type="text/javascript">
$(document).ready(function() {
// Generate a simple captcha
function randomNumber(min, max) {
return Math.floor(Math.random() * (max - min + 1) + min);
};
$('#captchaOperation').html([randomNumber(1, 100), '+', randomNumber(1, 200), '='].join(' '));
$('#defaultForm').bootstrapValidator({
// live: 'disabled',
message: 'This value is not valid',
feedbackIcons: {
valid: 'glyphicon glyphicon-ok',
invalid: 'glyphicon glyphicon-remove',
validating: 'glyphicon glyphicon-refresh'
},
fields: {
firstName: {
validators: {
notEmpty: {
message: 'The first name is required and cannot be empty'
}
}
},
lastName: {
validators: {
notEmpty: {
message: 'The last name is required and cannot be empty'
}
}
},
username: {
message: 'The username is not valid',
validators: {
notEmpty: {
message: 'The username is required and cannot be empty'
},
stringLength: {
min: 6,
max: 30,
message: 'The username must be more than 6 and less than 30 characters long'
},
regexp: {
regexp: /^[a-zA-Z0-9_\.]+$/,
message: 'The username can only consist of alphabetical, number, dot and underscore'
},
remote: {
url: 'remote.php',
message: 'The username is not available'
},
different: {
field: 'password',
message: 'The username and password cannot be the same as each other'
}
}
},
email: {
validators: {
emailAddress: {
message: 'The input is not a valid email address'
}
}
},
password: {
validators: {
notEmpty: {
message: 'The password is required and cannot be empty'
},
identical: {
field: 'confirmPassword',
message: 'The password and its confirm are not the same'
},
different: {
field: 'username',
message: 'The password cannot be the same as username'
}
}
},
confirmPassword: {
validators: {
notEmpty: {
message: 'The confirm password is required and cannot be empty'
},
identical: {
field: 'password',
message: 'The password and its confirm are not the same'
},
different: {
field: 'username',
message: 'The password cannot be the same as username'
}
}
},
birthday: {
validators: {
date: {
format: 'YYYY/MM/DD',
message: 'The birthday is not valid'
}
}
},
gender: {
validators: {
notEmpty: {
message: 'The gender is required'
}
}
},
'languages[]': {
validators: {
notEmpty: {
message: 'Please specify at least one language you can speak'
}
}
},
'programs[]': {
validators: {
choice: {
min: 2,
max: 4,
message: 'Please choose 2 - 4 programming languages you are good at'
}
}
},
captcha: {
validators: {
callback: {
message: 'Wrong answer',
callback: function(value, validator) {
var items = $('#captchaOperation').html().split(' '), sum = parseInt(items[]) + parseInt(items[]);
return value == sum;
}
}
}
}
}
});
// Validate the form manually
$('#validateBtn').click(function() {
$('#defaultForm').bootstrapValidator('validate');
});
$('#resetBtn').click(function() {
$('#defaultForm').data('bootstrapValidator').resetForm(true);
});
});
</script>
</body>
</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使用方法整理(推荐)的相关知识,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
超级兔子让浮动层消失的前因后果
Mar 09 Javascript
使用Jquery Aajx访问WCF服务(GET、POST、PUT、DELETE)
Mar 16 Javascript
js精度溢出解决方案
Dec 02 Javascript
js实现图片轮换效果代码
Apr 16 Javascript
JavaScript使用push方法添加一个元素到数组末尾用法实例
Apr 06 Javascript
javascript跨域总结之window.name实现的跨域数据传输
Nov 01 Javascript
JavaScript接口的实现三种方式(推荐)
Jun 14 Javascript
基于JavaScript实现点击页面任何位置返回
Aug 31 Javascript
微信小程序 实现tabs选项卡效果实例代码
Oct 31 Javascript
Vue.js上传图片到阿里云OSS存储的方法示例
Dec 13 Javascript
JS检索下拉列表框中被选项目的索引号(selectedIndex)
Dec 17 Javascript
Angular性能优化之第三方组件和懒加载技术
May 10 Javascript
关于JS中setTimeout()无法调用带参函数问题的解决方法
Jun 21 #Javascript
原生JS封装ajax 传json,str,excel文件上传提交表单(推荐)
Jun 21 #Javascript
jQuery动态添加可拖动元素完整实例(附demo源码下载)
Jun 21 #Javascript
带有定位当前位置的百度地图前端web api实例代码
Jun 21 #Javascript
jQuery中的ready函数与window.onload谁先执行
Jun 21 #Javascript
纯JS前端实现分页代码
Jun 21 #Javascript
jQuery AJAX timeout 超时问题详解
Jun 21 #Javascript
You might like
php 上传功能实例代码
2010/04/13 PHP
Linux中为php配置伪静态
2014/12/17 PHP
php+xml编程之xpath的应用实例
2015/01/24 PHP
smarty的section嵌套循环用法示例
2016/05/28 PHP
PHP 7.1新特性的汇总介绍
2016/12/16 PHP
PHP实现随机生成水印图片功能
2017/03/22 PHP
JavaScript 动态生成方法的例子
2009/07/22 Javascript
dropdownlist之间的互相联动实现(显示与隐藏)
2009/11/24 Javascript
jquery可见性过滤选择器使用示例
2013/06/24 Javascript
jquery将一个表单序列化为一个对象的方法
2013/12/02 Javascript
NodeJs中的VM模块详解
2015/05/06 NodeJs
Vue.Draggable实现拖拽效果
2020/07/29 Javascript
js分页之前端代码实现和请求处理
2017/08/04 Javascript
Bootstrap table中toolbar新增条件查询及refresh参数使用方法
2018/05/18 Javascript
react-router4按需加载(踩坑填坑)
2019/01/06 Javascript
JavaScript 链表定义与使用方法示例
2020/04/28 Javascript
[00:05]ChinaJoy现场 DOTA2玩家高呼“CN DOTA BEST DOTA”
2019/08/04 DOTA
[52:39]完美世界DOTA2联赛PWL S3 CPG vs Forest 第一场 12.16
2020/12/17 DOTA
[07:25]DOTA2-DPC中国联赛2月5日Recap集锦
2021/03/11 DOTA
详解django中自定义标签和过滤器
2017/07/03 Python
基于python中pygame模块的Linux下安装过程(详解)
2017/11/09 Python
python实现京东秒杀功能
2018/07/30 Python
python读取有密码的zip压缩文件实例
2019/02/08 Python
pandas的排序和排名的具体使用
2019/07/31 Python
Luxplus荷兰:以会员价购买美容产品等,独家优惠
2019/08/30 全球购物
哥德堡通行证:Gothenburg Pass
2019/12/09 全球购物
Lentiamo丹麦:购买便宜的隐形眼镜
2021/01/13 全球购物
党校学习思想汇报
2014/01/06 职场文书
应届毕业生应聘自荐信范文
2014/02/26 职场文书
公司办公室岗位职责
2014/03/19 职场文书
法人授权委托书公证范本
2014/09/14 职场文书
农业生产宣传标语
2014/10/08 职场文书
幸福来敲门观后感
2015/06/04 职场文书
2016年小学端午节活动总结
2016/04/01 职场文书
sass 常用备忘案例详解
2021/09/15 HTML / CSS
python基础之//、/与%的区别详解
2022/06/10 Python