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控制分页打印、打印分页示例
Feb 08 Javascript
jquery简单图片切换显示效果实现方法
Jan 14 Javascript
javascript实现多级联动下拉菜单的方法
Feb 06 Javascript
ES6新特性之字符串的扩展实例分析
Apr 01 Javascript
使用jQuery实现购物车结算功能
Aug 15 jQuery
JS实现延迟隐藏功能的方法(类似QQ头像鼠标放上展示信息)
Dec 28 Javascript
node爬取新型冠状病毒的疫情实时动态
Feb 06 Javascript
vue+vant使用图片预览功能ImagePreview的问题解决
Apr 10 Javascript
JS中作用域以及变量范围分析
Jul 18 Javascript
vue实现简单全选和反选功能
Sep 15 Javascript
微信小程序将页面按钮悬浮固定在底部的实现代码
Oct 29 Javascript
vue mvvm数据响应实现
Nov 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
php smarty模版引擎中的缓存应用
2009/12/02 PHP
ajax+php打造进度条代码[readyState各状态说明]
2010/04/12 PHP
对text数据类型不支持代码页转换 从: 1252 到: 936
2011/04/23 PHP
微信公众平台开发之天气预报功能
2015/08/31 PHP
浅谈PHP的排列组合(如输入a,b,c 输出他们的全部组合)
2017/03/14 PHP
二级域名转向类
2006/11/09 Javascript
理解Javascript_02_理解undefined和null
2010/10/11 Javascript
lyhucSelect基于Jquery的Select数据联动插件
2011/03/29 Javascript
ajax异步刷新实现更新数据库
2012/12/03 Javascript
js中Image对象以及对其预加载处理示例
2013/11/20 Javascript
IE中图片的onload事件无效问题和解决方法
2014/06/06 Javascript
node.js中的http.request方法使用说明
2014/12/14 Javascript
浅谈Javascript Base64 加密解密
2014/12/28 Javascript
JavaScript中split() 使用方法汇总
2015/04/17 Javascript
js实现简单秒表走动的时钟特效
2020/03/25 Javascript
javascript的正则匹配方法学习
2016/02/24 Javascript
第二篇Bootstrap起步
2016/06/21 Javascript
webpack4+react多页面架构的实现
2018/10/25 Javascript
功能完善的小程序日历组件的实现
2020/03/31 Javascript
[15:23]教你分分钟做大人:虚空假面
2014/10/30 DOTA
Python爬虫DNS解析缓存方法实例分析
2017/06/02 Python
python开发游戏的前期准备
2019/05/05 Python
python实现抽奖小程序
2020/04/15 Python
python的内存管理和垃圾回收机制详解
2019/05/18 Python
python3实现带多张图片、附件的邮件发送
2019/08/10 Python
python except异常处理之后不退出,解决异常继续执行的实现
2020/04/25 Python
python继承threading.Thread实现有返回值的子类实例
2020/05/02 Python
Python爬虫使用bs4方法实现数据解析
2020/08/25 Python
音乐表演专业毕业生求职信
2013/10/14 职场文书
药学专业大专生的自我评价
2013/12/12 职场文书
工程负责人任命书
2014/06/06 职场文书
社区精神文明建设汇报材料
2014/08/17 职场文书
常务副县长“四风”个人对照检查材料思想汇报
2014/10/02 职场文书
教师作风整顿个人剖析材料
2014/10/10 职场文书
乡镇三严三实学习心得体会
2014/10/13 职场文书
学校节水倡议书
2015/04/29 职场文书