Bootstrapvalidator校验、校验清除重置的实现代码(推荐)
作者:zhangtongzct 发布时间:2024-04-10 13:52:57
标签:bootstrap,validator,校验,重置
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校验、校验清除重置的实现代码(推荐)网站的支持!
来源:http://www.cnblogs.com/zhangtongzct/p/5728592.html
0
投稿
猜你喜欢
- 本文实例讲述了Python动态导入模块的方法。分享给大家供大家参考,具体如下:一、正常导入模块正常模块导入方式: import module
- 1、超时时间以下这些配置项单位都是秒,在mysql命令行中可以使用show global variables like '变量名
- 数据库锁介绍: https://www.jb51.net/article/248863.htm一、查询oracle锁定的表:1、锁相关表SE
- 今天,发现了一个之前从未注意的角落,相信能够大大提高自己写JS的速度。能够迅速发现错误。例如,今天的加班中调试一个js错误发现的一个例子。1
- 回表查询InnoDB索引分为两大类,一类是聚集索引(Clustered Index),一类是非聚集索引(Secondary Index)聚集
- C语言是编译型语言,经过编译后,生成机器码,然后再运行,执行速度快,不能跨平台,一般用于操作系统,驱动等底层开发。Python是编译型还是解
- 上传html文件内容如下:操作步骤<html><head><meta http-equiv="con
- 单张人脸关键点检测定义可视化图像函数导入三维人脸关键点检测模型导入可视化函数和可视化样式读取图像将图像模型输入,获取预测结果BGR转RGB将
- 花了两周时间,利用工作间隙时间,开发了一个基于Django的项目任务管理Web应用。项目计划的实时动态,可以方便地被项目成员查看(^_^又重
- 什么是DLL文件?DLL文件为动态链接库(英语: Dynamic-link library, 缩写为DLL)它是微软公司在微软视窗操作系统中
- 1、PyInstaller简介PyInstaller是一个跨平台的Python应用打包工具,支持 Windows/Linux/MacOS三大
- 最近因需要用python写一个微服务来用MQTT给硬件传输图片,其中python用的是flask框架,大概流程如下:协议为:需要将图片数据封
- 阅读上一篇:微软建议的ASP性能优化28条守则(2) 技巧 5:不要将数据库连接缓存在 Application 或 Session 对象中
- //-------------------------------------------- // 删除千分点。 //-----------
- 一、游戏玩法介绍:24点游戏是儿时玩的主要益智类游戏之一,玩法为:从一副扑克中抽取4张牌,对4张牌使用加减乘除中的任何方法,使计算结果为24
- 今天打包selenium一个简单的请求,打完包本机运行exe没有问题,换台机器就闪退,非常蛋疼找了半天原因。下面简述下,防止踩坑,如果闪退十
- 对于一个多元函数 用牛顿法求其极小值的迭代格式为其中 为函数 的梯度向量, 为函数 的Hesse(Hessian)矩阵。上述牛顿法
- 1.Django框架Django是一个开放源代码的Web应用框架,由Python写成。它采用 了MVC的框架模式,即模型(M)、视图(V)和
- 短几年,Google 的 Logo 已经象 Nike 的挑勾和 NBC 的孔雀图案一样著名了。Ruth Kedar,Google
- 目录1. 字典基础知识字典的基本格式表示字典的键、值设置要求1)键的设置要求2)值的设置要求2. 字典元素增加1.利用赋值给字典增加元素2.