Bootstrapvalidator校验、校验清除重置的实现代码(推荐)


Posted in Javascript onSeptember 28, 2016

1.引入css与js

bootstrapValidator.min.css

bootstrapValidator.min.js

2.html中的modal代码

<div class="modal fade" id="editModal" tabindex="-1" role="dialog"
aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content" >
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"
aria-hidden="true">×</button>
<h4 class="modal-title" id="editModalLabel"></h4>
</div>
<div class="modal-body">
<!-- form start -->
<form class="form-horizontal" id="saveadmin_form"
name="form-horizontal">
<input type="hidden" id="adminid" />
<div class="box-body">
<dl class="dl-horizontal">
<div class="form-group">
<div class="col-sm-10">
<dt>管理员名</dt>
<dd>
<lable id="edit_show_adminname"></lable>
<input type="text" class="form-control" id="edit_adminName"
name="edit_adminName" data-bv-notempty="true"
name="edit_adminName">
</dd>
</div>
</div>
<div class="form-group" id="div_password">
<div class="col-sm-10">
<dt>密码</dt>
<dd>
<input type="text" class="form-control" name="edit_passwd"
id="edit_passwd">
</dd>
</div>
</div>
<div class="form-group" id="div_password1">
<div class="col-sm-10">
<dt>确认密码</dt>
<dd>
<input type="text" class="form-control" name="edit_passwd1"
id="edit_passwd1">
</dd>
</div>
</div>
<div class="form-group">
<div class="col-sm-10">
<dt>显示名</dt>
<dd>
<input type="text" name="edit_displayName"
class="form-control" id="edit_displayName">
</dd>
</div>
</div>
<div class="form-group">
<div class="col-sm-10">
<dt>邮箱</dt>
<dd>
<input type="text" data-bv-notempty="true" name="edit_Mail"
class="form-control" id="edit_Mail">
</dd>
</div>
</div>
<div class="form-group">
<div class="col-sm-10">
<dt>备注</dt>
<dd>
<textarea class="form-control" name="edit_desc" rows="3"
id="edit_desc"></textarea>
</dd>
</div>
</div>
</dl>
</div>
<!-- /.box-body -->
<div class="modal-footer">
<!-- <button type="button" onclick="saveAdmin()" class="btn btn-default">保存</button> -->
<button onclick="saveAdmin()" type="button" class="btn btn-success">
<i class="fa fa-check"></i> 保存
</button>
<button type="button" class="btn btn-danger" data-dismiss="modal">
<i class="fa fa-times"></i> 关闭
</button>
</div>
</form>
</div>
</div>
</div>
</div>

3.js代码

//保存
function saveAdmin(){
//开启验证
$('#saveadmin_form').data('bootstrapValidator').validate(); 
if(!$('#saveadmin_form').data('bootstrapValidator').isValid()){ 
return ; 
} 
//表单提交
$.ajax({
type: "POST",
dataType : 'json',
url: "<%=request.getContextPath()%>/user/saveUser.html?ma="+Math.random(),
data: {
"type" :"0",
"id":$("#adminid").val(),
"account":$("#edit_adminName").val(),
"display_name":$("#edit_displayName").val(),
"password":$("#edit_passwd").val(),
"mail":$("#edit_Mail").val(),
"role":$("#edit_role").val(),
"desc":$("#edit_desc").val()
},
success :function(json) {
json = eval("("+json+")");
$("#editModal").modal("hide");
$("#dialog_content").html(json.message);
$("#dialog_button_queren").hide();
$("#dialog_modal").modal("show");
t.ajax.reload( null, true );
}
});
}
//初始化表单验证
$(document).ready(function() {
formValidator();
});
/*********************************校验重置重点在这里 当modal隐藏时销毁验证再重新加载验证****************************************/ 
//Modal验证销毁重构
$('#editModal').on('hidden.bs.modal', function() {
$("#saveadmin_form").data('bootstrapValidator').destroy();
$('#saveadmin_form').data('bootstrapValidator', null);
formValidator();
});
//form验证规则
function formValidator(){
$('#saveadmin_form').bootstrapValidator({
message: 'This value is not valid',
feedbackIcons: {
valid: 'glyphicon glyphicon-ok',
invalid: 'glyphicon glyphicon-remove',
validating: 'glyphicon glyphicon-refresh'
},
fields: {
//管理员名
edit_adminName: {
message: '管理员名验证失败',
validators: {
notEmpty: {
message: '管理员名不能为空'
},
stringLength: {
min: 5,
max: 64,
message: '管理员名长度必须在6到64位之间'
}
}
},
//密码
edit_passwd: {
message: '密码验证失败',
validators: {
notEmpty: {
message: '密码不能为空'
},
stringLength: {
min: 5,
max: 64,
message: '密码长度在5到64之间'
}/* ,
identical: {
field: 'edit_passwd1',
message: '两次密码不相同'
} */
}
},
//密码确认
edit_passwd1: {
message: '密码确认验证失败',
validators: {
notEmpty: {
message: '密码确认不能为空'
},
identical: {
field: 'edit_passwd',
message: '两次密码不相同'
}
}
},
//显示名
edit_displayName: {
message: '用户名验证失败',
validators: {
notEmpty: {
message: '显示名不能为空'
},
stringLength: {
min: 5,
max: 128,
message: '显示名长度必须在6到18位之间'
}
}
},
//邮箱
edit_Mail: {
validators: {
notEmpty: {
message: '邮箱不能为空'
},
emailAddress: {
message: '邮箱格式正确'
},
stringLength: {
max:256,
message: '邮箱长度必须小于256'
}
}
},
//备注
edit_desc: {
message: '备注验证失败',
validators: {
stringLength: {
max: 256,
message: '备注长度长度必须小于256'
}
}
},
}
});
}

以上所述是小编给大家介绍的Bootstrapvalidator校验、校验清除重置的实现代码(推荐),希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
AngularJS初始化过程分析(引导程序)
Dec 06 Javascript
究竟什么是Node.js?Node.js有什么好处?
May 29 Javascript
jquery实现鼠标滑过后动态图片提示效果实例
Aug 10 Javascript
jQuery 1.9.1源码分析系列(十五)动画处理之缓动动画核心Tween
Dec 03 Javascript
AngularJS入门教程之表格实例详解
Jul 27 Javascript
jQuery自适应轮播图插件Swiper用法示例
Aug 24 Javascript
JS实现简单易用的手机端浮动窗口显示效果
Sep 07 Javascript
基于jQuery.i18n实现web前端的国际化
May 04 jQuery
微信小程序如何调用图片接口API并居中显示
Jun 29 Javascript
如何在vue中使用jointjs过程解析
May 29 Javascript
在vscode 中设置 vue模板内容的方法
Sep 02 Javascript
el-form 多层级表单的实现示例
Sep 10 Javascript
bootstrap datepicker限定可选时间范围实现方法
Sep 28 #Javascript
BootstrapValidator不触发校验的实现代码
Sep 28 #Javascript
bootstrap datepicker 与bootstrapValidator同时使用时选择日期后无法正常触发校验的解决思路
Sep 28 #Javascript
使用bootstrapValidator插件进行动态添加表单元素并校验
Sep 28 #Javascript
BootStrap 动态添加验证项和取消验证项的实现方法
Sep 28 #Javascript
Javascript中判断一个值是否为undefined的方法详解
Sep 28 #Javascript
BootStrap Validator使用注意事项(必看篇)
Sep 28 #Javascript
You might like
深入解析PHP垃圾回收机制对内存泄露的处理
2013/06/14 PHP
详解PHP中instanceof关键字及instanceof关键字有什么作用
2015/11/05 PHP
PHP基于Redis消息队列实现发布微博的方法
2017/05/03 PHP
在JavaScript中遭遇级联表达式陷阱
2007/03/08 Javascript
一个可绑定数据源的jQuery数据表格插件
2010/07/17 Javascript
模拟jQuery ajax服务器端与客户端通信的代码
2011/03/28 Javascript
jquery select多选框的左右移动 具体实现代码
2013/07/03 Javascript
将input file的选择的文件清空的两种解决方案
2013/10/21 Javascript
解析jquery中的ajax缓存问题
2013/12/19 Javascript
jQuery实现鼠标悬停显示提示信息窗口的方法
2015/04/30 Javascript
在JavaScript应用中使用RequireJS来实现延迟加载
2015/07/01 Javascript
JS实现的简洁二级导航菜单雏形效果
2015/10/13 Javascript
分享我对JS插件开发的一些感想和心得
2016/02/04 Javascript
实例讲解jQuery EasyUI tree中state属性慎用
2016/04/01 Javascript
基于JavaScript实现全选、不选和反选效果
2017/02/15 Javascript
微信小程序实战之自定义toast(6)
2017/04/18 Javascript
详解webpack中的hash、chunkhash、contenthash区别
2018/01/05 Javascript
nodejs前端模板引擎swig入门详解
2018/05/15 NodeJs
Vue中使用vux配置代码详解
2018/09/16 Javascript
vue中使用protobuf的过程记录
2018/10/26 Javascript
python selenium 对浏览器标签页进行关闭和切换的方法
2018/05/21 Python
python 根据时间来生成唯一的字符串方法
2019/01/14 Python
Django实现将views.py中的数据传递到前端html页面,并展示
2020/03/16 Python
python 日志模块 日志等级设置失效的解决方案
2020/05/26 Python
纯HTML5+CSS3制作生日蛋糕代码
2016/11/16 HTML / CSS
用HTML5实现鼠标滚轮事件放大缩小图片的功能
2015/06/25 HTML / CSS
英国知名的护肤彩妆与时尚配饰大型综合零售电商:Unineed
2016/11/21 全球购物
初一体育教学反思
2014/01/29 职场文书
收银出纳员岗位职责
2014/02/23 职场文书
音乐学专业求职信
2014/07/22 职场文书
大学教师师德师风演讲稿
2014/08/22 职场文书
仓库统计员岗位职责
2015/04/14 职场文书
教导处教学工作总结
2015/08/12 职场文书
新入职员工工作总结
2015/10/15 职场文书
怎样写工作总结啊!
2019/06/18 职场文书
如何开发一个渐进式Web应用程序PWA
2021/05/10 Javascript