Bootstrapvalidator校验、校验清除重置的实现代码(推荐)

 更新时间:2016年09月28日 10:50:14   作者:zhangtongzct  
这篇文章给大家介绍了bootstrapvalidator校验、校验清除重置的实现代码,在代码中需要我们引入css与js文件,大家可以参考下文的代码

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校验、校验清除重置的实现代码(推荐),希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!

相关文章

  • Nest.js快速启动API项目过程详解

    Nest.js快速启动API项目过程详解

    这篇文章主要为大家介绍了Nest.js快速启动API项目过程详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-10-10
  • IE无法设置短域名下Cookie

    IE无法设置短域名下Cookie

    最近客户在使用我们的流量监测系统以及GA时发现了一个问题,我们统计到的数据比GA的要多很多倍,而且我们统计到的数据中,跳出率非常高,高达99%左右。
    2010-09-09
  • 解析Javascript单例模式概念与实例

    解析Javascript单例模式概念与实例

    本文将介绍Javascript模式中较为常见和实用的模式——单例模式,主要分为概念和实例部分。在介绍实例的同时也会对代码中额外的知识点进行讲解。需要的朋友可以看下
    2016-12-12
  • 原生JS实现前端本地文件上传

    原生JS实现前端本地文件上传

    这篇文章主要为大家详细介绍了原生JS实现前端本地文件上传,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2018-09-09
  • jQuery实现仿百度首页滑动伸缩展开的添加服务效果代码

    jQuery实现仿百度首页滑动伸缩展开的添加服务效果代码

    这篇文章主要介绍了jQuery实现仿百度首页滑动伸缩展开的添加服务效果代码,通过jQuery相应鼠标事件控制页面元素的动态变换功能,非常具有实用价值,需要的朋友可以参考下
    2015-09-09
  • js实现简单圆盘时钟

    js实现简单圆盘时钟

    这篇文章主要为大家详细介绍了js实现简单圆盘时钟,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-09-09
  • Javascript实现通过选择周数显示开始日和结束日的实现代码

    Javascript实现通过选择周数显示开始日和结束日的实现代码

    这篇文章主要介绍了Javascript实现通过选择周数显示开始日和结束日的实例代码的相关资料,非常不错具有参考借鉴价值,需要的朋友可以参考下
    2016-05-05
  • 深入剖析javascript中的exec与match方法

    深入剖析javascript中的exec与match方法

    下面小编就为大家带来一篇深入剖析javascript中的exec与match方法。小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2016-05-05
  • javascript实现移动端 HTML5 图片上传预览和压缩功能示例

    javascript实现移动端 HTML5 图片上传预览和压缩功能示例

    这篇文章主要介绍了javascript实现移动端 HTML5 图片上传预览和压缩功能,结合实例形式分析了javascript移动端 HTML5 图片上传预览和压缩功能具体实现方法与操作注意事项,需要的朋友可以参考下
    2020-05-05
  • JS中的oninput和onchange事件的区别及如何正确使用

    JS中的oninput和onchange事件的区别及如何正确使用

    在JavaScript中,oninput和onchange事件是用于处理用户输入的常见事件,本文将介绍oninput和onchange事件的区别,以及如何在实际开发中正确使用它们,感兴趣的朋友跟随小编一起看看吧
    2023-10-10

最新评论