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 相关文章推荐
兼容IE/Firefox/Opera/Safari的检测页面装载完毕的脚本Ext.onReady的实现
Jul 14 Javascript
js indexOf()定义和用法
Oct 21 Javascript
如何让div span等元素能响应键盘事件操作指南
Nov 13 Javascript
jquery特效 幻灯片效果示例代码
Jul 16 Javascript
JavaScript获取多个数组的交集简单实例
Nov 11 Javascript
使用jquery.validate自定义方法实现&quot;手机号码或者固话至少填写一个&quot;的逻辑验证
Sep 01 Javascript
JavaScript代码复用模式详解
Nov 07 Javascript
node.js中的dns.getServers方法使用说明
Dec 08 Javascript
JQuery.get提交页面不跳转的解决方法
Jan 13 Javascript
把json格式的字符串转换成javascript对象或数组的方法总结
Nov 03 Javascript
微信小程序实现购物页面左右联动
Feb 15 Javascript
Vue-cli4 配置 element-ui 按需引入操作
Sep 11 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
DC漫画《蝙蝠侠和猫女》图透 猫女怀孕老爷当爹
2020/04/09 欧美动漫
php md5下16位和32位的实现代码
2008/04/09 PHP
php5.2 Json不能正确处理中文、GB编码的解决方法
2014/03/28 PHP
php的mssql数据库连接类实例
2014/11/28 PHP
PHP浮点数的一个常见问题
2016/03/10 PHP
Ecshop 后台添加新功能栏目及管理权限设置教程
2017/11/21 PHP
JavaScript 版本自动生成文章摘要
2008/07/23 Javascript
JavaScript 学习笔记(十一)
2010/01/19 Javascript
javascript 处理null及null值示例
2014/06/09 Javascript
JS实现的用来对比两个用指定分隔符分割的字符串是否相同
2014/09/19 Javascript
Javascript中的几种URL编码方法比较
2015/01/23 Javascript
JS实现图片局部放大或缩小的方法
2016/08/20 Javascript
全面解析Node.js 8 重要功能和修复
2017/06/02 Javascript
详解webpack 如何集成第三方js库
2017/06/29 Javascript
一个Vue页面的内存泄露分析详解
2018/06/25 Javascript
解决Layui数据表格中checkbox位置不居中的方法
2018/08/15 Javascript
微信小程序开发之map地图组件定位并手动修改位置偏差
2019/08/17 Javascript
javascript操作元素的常见方法小结
2019/11/13 Javascript
vue3弹出层V3Popup实例详解
2021/01/04 Vue.js
[44:40]2018DOTA2亚洲邀请赛3月30日 小组赛A组Liquid VS OG
2018/03/31 DOTA
Swift中的协议(protocol)学习教程
2016/07/08 Python
matplotlib调整子图间距,调整整体空白的方法
2018/08/03 Python
TensorFlow实现模型评估
2018/09/07 Python
python函数与方法的区别总结
2019/06/23 Python
Python OpenCV实现鼠标画框效果
2020/08/19 Python
Python3和pyqt5实现控件数据动态显示方式
2019/12/13 Python
Python守护进程实现过程详解
2020/02/10 Python
英国奢侈皮具品牌:Aspinal of London
2018/09/02 全球购物
车辆维修工自我评价怎么写
2013/09/20 职场文书
《雨霖铃》听课反思
2014/02/13 职场文书
创建精神文明单位实施方案
2014/03/08 职场文书
战略合作意向书
2014/07/29 职场文书
公务员培的训心得体会
2014/09/01 职场文书
英语四级考试作弊检讨书
2014/09/29 职场文书
幼儿园教师岗位职责
2015/04/02 职场文书
MySQL的表级锁,行级锁,排它锁和共享锁
2022/07/15 MySQL