关键词：
实用方法
1.引入
在有jquery和bootstrap的页面里引入bootstrapValidator.js和bootstrapValidator.css文件
2. 按照bootstrap的表单组件 构建html代码
在表单中，若对某一字段想添加验证规则，默认需要以<div class=”form-group”></div>包裹（对应错误提示会根据该class值定位），内部<input class="form-control" />标签必须有name属性值，此值为验证匹配字段。
<form id="loginForm">
<div class="form-group">
<label for="username">管理员</label>
<input name="username" type="text" class="form-control" id="username" placeholder="请输入用户名">
</div>
<div class="form-group">
<label for="password">密码</label>
<input name="password" type="password" class="form-control" id="password" placeholder="请输入密码">
</div>
<button type="reset" class="btn btn-default">重置</button>
<button type="submit" class="btn btn-primary">登录</button>
</form>
3.找到需要做校验的表单 初始化校验插件方法
$(‘#loginForm‘).bootstrapValidator({
/*根据验证结果显示的各种图标*/
feedbackIcons: {
valid: ‘glyphicon glyphicon-ok‘,
invalid: ‘glyphicon glyphicon-remove‘,
validating: ‘glyphicon glyphicon-refresh‘
},
/*去校验表单元素 用户名 密码*/
/*校验状态：未校验 NOT_VALIDATED 正在校验 VALIDATING 校验成功 VALID 校验失败 INVALID */
/*校验规则：是需要去配置*/
/* fields 字段 ---> 表单内的元素*/
fields:{
/*指定需要校验的元素 通过name数据去指定*/
username:{
/*配置校验规则 规则不止一个*/
validators:{
/*配置具体的规则*/
notEmpty:{
/*校验不成功的提示信息*/
message:‘请您输入用户名‘
},
/*自定义规则*/
callback:{
message:‘用户名错误‘
}
}
},
password:{
validators:{
notEmpty:{
message:‘请您输入密码‘
},
stringLength:{
min:6,
max:18,
message:‘密码6-18个字符‘
},
/*自定义规则*/
callback:{
message:‘密码错误‘
}
}
}
}
/*当校验失败 默认阻止了提交*/
/*当校验成功 默认就提交了*/
/*阻止默认的提交方式 改用ajax提交方式*/
}).on(‘success.form.bv‘,function (e) {
/*阻止浏览器默认行为*/
e.preventDefault();
var $form = $(e.target);
/*发登录请求*/
$.ajax({
type:‘post‘,
url:‘/employee/employeeLogin‘,
/*可传递的数据格式 对象 序列化后的数据 key=value的字符串 [{name:‘‘,value},...] */
data:$form.serialize(),
dataType:‘json‘,
success:function (data) {
/*响应成功后的逻辑*/
if(data.success){
location.href = ‘/admin/index.html‘;
}else{
if(data.error == 1000){
/*调用校验插件 让该选项置为 校验失败状态 提示校验失败的信息*/
/*updateStatus(‘哪个元素’，‘修改为什么状态’，‘校验规则’)*/
$form.data(‘bootstrapValidator‘).updateStatus(‘username‘,‘INVALID‘,‘callback‘)
}else if(data.error == 1001){
$form.data(‘bootstrapValidator‘).updateStatus(‘password‘,‘INVALID‘,‘callback‘)
}
}
}
});
});
jqvalidator.js使用说明
简介：该插件是基于bootstrapvalidator.js进行修改编写的，写法类似，可兼容ie7+以上 一、使用方法1.引用jQuery.js / jQValidator.js / jQValidator.css<linkhref="css/jQValidator.css"rel="stylesheet"type="text/css"/&g 查看详情
inputcheckbox操作，最好用prop，不要用attr
$(".selectAll").on(‘click‘,function(){if($(this).attr(‘data‘)==1){$(".selectCheckBox").prop(‘checked‘,true);}else{$(".selectCheckBox").prop("checked",false);}}); 查看详情
bootstrapfileinput.js，最好用的文件上传组件
本篇介绍如何使用bootstrapfileinput.js（最好用的文件上传组件）来进行图片的展示，上传，包括springMVC后端文件保存。一、demo 二、插件引入<linktype="text/css"rel="stylesheet"href="${ctx}/components/fileinput/css/fileinput.css"/><scripttype= 查看详情
用 jQuery UI 替换 showModalDialog ，最好的方法是啥？
】用jQueryUI替换showModalDialog，最好的方法是啥？【英文标题】：replaceshowModalDialogwithjQueryUI,whatisthebestway?用jQueryUI替换showModalDialog，最好的方法是什么？【发布时间】：2018-10-0510:08:09【问题描述】：我是javascript和jQueryUI的新手。目... 查看详情
哪些javascriptide最好用？
阅读本文之前，分享大家一张图片，看图会发现JavaScript开发需求最高，占比达到42.84%。因此掌握JavaScript语言好工作就不愁啦，工欲善其事必先利其器，那么选择IDE来开发是至关重要的，本文指出经常使用的几款JavaScriptIDE，... 查看详情
打造mac上最好用的terminal
出处：https://blog.csdn.net/kebing1011/article/details/46934533?utm_source=blogxgwz0 查看详情
JPA 实现——哪一个最好用？ [关闭]
】JPA实现——哪一个最好用？[关闭]【英文标题】：JPAImplementations-Whichoneisthebesttouse?[closed]【发布时间】：2010-10-0906:22:49【问题描述】：我使用了以下JPA实现：休眠，顶联，OpenJPA他们每个人都有自己的长处和短处。我发现Hibernate... 查看详情
用亲身经历告诉你，在你的并发程序代码块中，最好最好不要有引用类型
用亲身经历告诉你，在你的并发程序代码块中，最好最好不要有引用类型，必要的string类型还是可以的。目前正在把自己前段时间写的并发程序放到自己的项目中，以提高速度，由于我的项目是与移动对接的，因此，询问了移动... 查看详情
idea最好用的插件
1.lombok不用写get,set方法2.MyBatisCodeHelperPro3.RainbowBrackets彩虹括号5.activate-power-mode动感打字7.BackgroundImagePlus给编辑器换个背景8.MarkdownsupportIdea中优化Markdown Support显示效果10.AlibabaJavaCodingGuidelines代码检查 查看详情
什么邮箱的文档功能最好用？
...文档进行编辑，就想问句累不累，看得我都想来分享一下最好用的网易文档功能了，快看如下：1、一部手机就能搞定所有的移动端功能网易文档移动端已完成多渠道覆盖，用户可以根据使用习惯选择办公工具，利用碎片化时间... 查看详情
三十最好用的懒加载
window.Echo=(function(window,document,undefined)‘usestrict‘;varstore=[],offset,throttle,poll;var_inView=function(el)varcoords=el.getBoundingClientRect();return((coords.top>=0&&coords.left 查看详情
外贸的用哪个企业邮箱最好
做外贸的用哪个企业邮箱最好什么是外贸邮箱？外贸邮箱是以您自己的域名为后缀的；考虑到公司企业形象，如果在网上放免费邮箱会严重影响公司形象，会让客户觉得不正规，所以最好申请企业邮箱,更重要的是企业邮箱在安... 查看详情
移动狂欢日全场8折，用知识遇见最好的自己！
...这些遇见一点都不美好…其实说到底，因为我们还没遇见最好的自己而遇见最好自己的捷径便是“知识”5月8日-5月10日请和51CTO学院用知识遇见最好的自己吧！届时学院手机移动端，所有课程都将8折出售！（优惠仅限APP，没有下... 查看详情
用css设置table的细边框的最好用的方法
今天同事向我问了一个问题，他要设置table的边框，说实话，我也很少弄过table的边框。通过差一些资料http://blog.sina.com.cn/s/blog_565812e60100czbn.html，我发现设置table的CSS为{border-collapse:collapse;border:none;},再设置td的CSS为{border:solid#0001px... 查看详情
如何最好地用一个替换多个空格（在python中）？ [复制]
】如何最好地用一个替换多个空格（在python中）？[复制]【英文标题】：Howtobestreplacemultiplewhitespacesbyone(inpython)?[duplicate]【发布时间】：2016-09-2312:56:01【问题描述】：在python中，例如，我有以下字符串：a="Sentencewithweirdwhitespaces"我... 查看详情
springmvc数据绑定之日期属性编辑器（最好用）
springMVC数据绑定之日期属性编辑器（最好用）特点：1.默认支持常用的4种日期格式；2.支持扩展日期格式直接上代码：importjava.awt.*;importjava.beans.PropertyChangeListener;importjava.beans.PropertyEditor;importjava.text 查看详情
visualstudio哪个版本最好用，vs最好用的版本事哪个？
参考技术AVisualStudiomunity2013应该是最好用的。另外，如果你急于开发Windows10通用应用，可以在Windows10预览版下再装一个VisualStudio2015预览版。两个版本可以并存互不影响。更新：既然好多人来点赞所以决定更新一下。更新：经过Bui... 查看详情
python最好用的ide及查看源码的方法
...比较流行的开发工具，比如JAVA的Eclipse,C#,C++的VisualStudio，最好的Python开发IDE就是PyCharm可以直接调试代码，试运行，逐步查找bug等。二、用PyCharm查看源码方法：想查看哪种数据类型的源码，就在PyCharm中按住ctrl点何种数据类型的... 查看详情