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 相关文章推荐
firefox中JS读取XML文件
Dec 21 Javascript
解决ExtJS在chrome或火狐中正常显示在ie中不显示的浏览器兼容问题
Jan 11 Javascript
JavaScript保留两位小数的2个自定义函数
May 05 Javascript
jQuery读取XML文件内容的方法
Mar 09 Javascript
JS实现简单的图书馆享元模式实例
Jun 30 Javascript
js jquery获取当前元素的兄弟级 上一个 下一个元素
Sep 01 Javascript
JS动态改变浏览器标题的方法
Apr 06 Javascript
Ionic2系列之使用DeepLinker实现指定页面URL
Nov 21 Javascript
jQuery模拟爆炸倒计时功能实例代码
Aug 21 jQuery
在HTML文档中嵌入JavaScript的四种方法
May 07 Javascript
简单了解微信小程序 e.target与e.currentTarget的不同
Sep 27 Javascript
js节流防抖应用场景,以及在vue中节流防抖的具体实现操作
Sep 21 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的加密方式及原理
2012/06/14 PHP
解析smarty模板中类似for的功能实现
2013/06/18 PHP
php获取网页标题和内容函数(不包含html标签)
2014/02/03 PHP
支持汉转拼和拼音分词的PHP中文工具类ChineseUtil
2018/02/23 PHP
传智播客学习之JavaScript基础篇
2009/11/13 Javascript
javascript &amp;&amp;和||运算法的另类使用技巧
2009/11/28 Javascript
jQuery学习笔记之Helloworld
2010/12/22 Javascript
JS时间选择器 兼容IE6,7,8,9
2012/06/26 Javascript
JQuery实现鼠标滑过显示导航下拉列表
2013/09/12 Javascript
使用typeof方法判断undefined类型
2014/09/09 Javascript
JavaScript不刷新实现浏览器的前进后退功能
2014/11/05 Javascript
JavaScript数组对象赋值用法实例
2015/08/04 Javascript
JS根据key值获取URL中的参数值及把URL的参数转换成json对象
2015/08/26 Javascript
jQuery实现的精美平滑二级下拉菜单效果代码
2016/03/28 Javascript
angularjs 获取默认选中的单选按钮的value方法
2018/02/28 Javascript
实例分析编写vue组件方法
2019/02/12 Javascript
js array数组对象操作方法汇总
2019/03/18 Javascript
vue2.0基于vue-cli+element-ui制作树形treeTable
2019/04/30 Javascript
Vue-router 报错NavigationDuplicated的解决方法
2020/03/31 Javascript
vue3.0 加载json的方法(非ajax)
2020/10/26 Javascript
vue 实现基础组件的自动化全局注册
2020/12/25 Vue.js
用vite搭建vue3应用的实现方法
2021/02/22 Vue.js
[02:53]DOTA2亚洲邀请赛 NewBee战队巡礼
2015/02/03 DOTA
[04:26]DOTA2上海特锦赛小组赛第二日 TOP10精彩集锦
2016/02/27 DOTA
python学习必备知识汇总
2017/09/08 Python
详解python实现线程安全的单例模式
2018/03/05 Python
python学生管理系统开发
2019/01/30 Python
pyqt5移动鼠标显示坐标的方法
2019/06/21 Python
Python序列对象与String类型内置方法详解
2019/10/22 Python
python tkinter之顶层菜单、弹出菜单实例
2020/03/04 Python
python实现图书馆抢座(自动预约)功能的示例代码
2020/09/29 Python
J.Crew官网:美国知名休闲服装品牌
2017/05/19 全球购物
2014客服代表实习自我鉴定
2014/09/18 职场文书
大学生违纪检讨书300字
2014/10/25 职场文书
职工的安全责任书范文!
2019/07/02 职场文书
创业计划书之电动车企业
2019/10/11 职场文书