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文件 document.createElement
Oct 14 Javascript
ExtJS GTGrid 简单用户管理
Jul 01 Javascript
js中小数转换整数的方法
Jan 26 Javascript
js自动查找select下拉的菜单并选择(示例代码)
Feb 26 Javascript
jquery使用jxl插件导出excel示例
Apr 14 Javascript
Javascript玩转继承(一)
May 08 Javascript
详细分析JavaScript变量类型
Jul 08 Javascript
JS判断是否长按某一键的方法
Mar 02 Javascript
BootstrapValidator不触发校验的实现代码
Sep 28 Javascript
微信小程序 引入es6 promise
Apr 12 Javascript
小程序跨页面交互的作用与方法详解
Jan 07 Javascript
JavaScript实现Tab标签页切换的最简便方式(4种)
Jun 28 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
在Windows中安装Apache2和PHP4的权威指南
2006/10/09 PHP
mysql+php分页类(已测)
2008/03/31 PHP
ThinkPHP让分页保持搜索状态的方法
2014/07/02 PHP
laravel框架与其他框架的详细对比
2019/10/23 PHP
Thinkphp 框架扩展之标签库驱动原理与用法分析
2020/04/23 PHP
在textarea文本域中显示HTML代码的方法
2007/03/06 Javascript
js正确获取元素样式详解
2009/08/07 Javascript
jquery常用特效方法使用示例
2014/04/25 Javascript
jquery中post方法用法实例
2014/10/21 Javascript
jQuery实现简洁的导航菜单效果
2015/11/23 Javascript
javascript绘制漂亮的心型线效果完整实例
2016/02/02 Javascript
jquery树形菜单效果的简单实例
2016/06/06 Javascript
jquery移除了live()、die(),新版事件绑定on()、off()的方法
2016/10/26 Javascript
js实现上下左右弹框划出效果
2017/03/08 Javascript
js实现下拉框效果(select)
2017/03/28 Javascript
vue 中filter的多种用法
2018/04/26 Javascript
AngularJs的UI组件ui-Bootstrap之Tooltip和Popover
2018/07/13 Javascript
微信小程序表单验证form提交错误提示效果
2020/06/19 Javascript
vue弹出框组件封装实例代码
2019/10/31 Javascript
如何区分vue中的v-show 与 v-if
2020/09/08 Javascript
Python自定义装饰器原理与用法实例分析
2018/07/16 Python
Python中@property的理解和使用示例
2019/06/11 Python
scikit-learn线性回归,多元回归,多项式回归的实现
2019/08/29 Python
利用PyQt中的QThread类实现多线程
2020/02/18 Python
html5指南-3.如何实现html元素拖拽功能
2013/01/07 HTML / CSS
Bobbi Brown芭比波朗美国官网:化妆师专业彩妆保养品品牌
2016/08/18 全球购物
加拿大票务网站:Ticketmaster加拿大
2017/07/17 全球购物
Pop In A Box英国:Funko POP搪胶公仔
2019/05/27 全球购物
瑞典度假品牌:OAS
2019/05/28 全球购物
倩碧澳大利亚官网:Clinique澳大利亚
2019/07/22 全球购物
Groupon法国官方网站:特卖和网上购物高达-70%
2019/09/02 全球购物
2014年小学德育工作总结
2014/12/05 职场文书
保研专家推荐信范文
2015/03/25 职场文书
幼儿园小班教学反思
2016/03/03 职场文书
餐厅如何利用“营销策略”扭转亏本局面
2019/10/15 职场文书
教你用Java在个人电脑上实现微信扫码支付
2021/06/13 Java/Android