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 相关文章推荐
js获取或设置当前窗口url参数的小例子
Oct 14 Javascript
JavaScript 作用域链解析
Nov 13 Javascript
javascript结合canvas实现图片旋转效果
May 03 Javascript
JavaScript实现仿网易通行证表单验证
May 25 Javascript
基于javascript实现图片左右切换效果
Jan 25 Javascript
jquery实现具有嵌套功能的选项卡
Feb 12 Javascript
javascript实现延时显示提示框特效代码
Apr 27 Javascript
javaScript事件学习小结(四)event的公共成员(属性和方法)
Jun 09 Javascript
AngularJS基础 ng-focus 指令简单示例
Aug 01 Javascript
BootStrapTable 单选及取值的实现方法
Jan 10 Javascript
详解vue-cli中配置sass
Jun 21 Javascript
js 下拉菜单点击旁边收起实现(踩坑记)
Sep 29 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缓存机制Output Control详解
2014/07/14 PHP
ThinkPHP函数详解之M方法和R方法
2015/09/10 PHP
js自带函数备忘 数组
2006/12/29 Javascript
JavaScript 基于原型的对象(创建、调用)
2009/10/16 Javascript
HTA版JSMin(省略修饰语若干)基于javascript语言编写
2009/12/24 Javascript
使用按钮控制以何种方式打开新窗口的属性介绍
2012/12/17 Javascript
捕获和分析JavaScript Error的方法
2014/03/25 Javascript
js获取url中&quot;?&quot;后面的字串方法
2014/05/15 Javascript
详解angular中如何监控dom渲染完毕
2017/01/03 Javascript
js判断手机号是否正确并返回的实现代码
2017/01/17 Javascript
解决Node.js使用MySQL出现connect ECONNREFUSED 127.0.0.1:3306的问题
2017/03/09 Javascript
jQuery实现的动态文字变化输出效果示例【附演示与demo源码下载】
2017/03/24 jQuery
详解webpack分包及异步加载套路
2017/06/29 Javascript
JS实现身份证输入框的输入效果
2017/08/21 Javascript
jQuery实现checkbox全选功能完整实例
2018/07/12 jQuery
基于vue和websocket的多人在线聊天室
2020/02/01 Javascript
Antd中单个DatePicker限定时间输入范围操作
2020/10/29 Javascript
使用Mock.js生成前端测试数据
2020/12/13 Javascript
Python读取Excel的方法实例分析
2015/07/11 Python
详解Python3网络爬虫(二):利用urllib.urlopen向有道翻译发送数据获得翻译结果
2019/05/07 Python
十分钟搞定pandas(入门教程)
2019/06/21 Python
Python 最强编辑器详细使用指南(PyCharm )
2019/09/16 Python
基于python实现语音录入识别代码实例
2020/01/17 Python
Pytorch框架实现mnist手写库识别(与tensorflow对比)
2020/07/20 Python
如何用Python和JS实现的Web SSH工具
2021/02/23 Python
FLIR美国官网:热成像, 夜视和红外摄像系统
2018/07/13 全球购物
英国打印机墨盒销售网站:Ink Factory
2019/10/07 全球购物
加拿大专业美发产品购物网站:Chatters
2021/02/28 全球购物
网络安全方面的面试题
2016/01/07 面试题
资料员的岗位职责
2013/11/20 职场文书
在教室放鞭炮的检讨书
2014/09/28 职场文书
劳模事迹材料范文
2014/12/24 职场文书
关于感谢信的范文
2015/01/23 职场文书
客房领班岗位职责
2015/02/11 职场文书
黄河绝恋观后感
2015/06/08 职场文书
Django实现翻页的示例代码
2021/05/24 Python