Bootstrap验证
<div class="modal fade" id="myModal" tabindex="-1" role="dialog">
<div class="modal-dialog">
<form id="addBookCode">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
<h1 class="modal-title" id="myModalLabel"><span>场景信息配置</span></h1>
</div>
<div class="modal-body">
<div class="form-group col-xs-12">
<div class="col-xs-4 text-right">
<label class="label_contorl text-right" for="txt_SenarioName_">情景名称:</label>
</div>
<div class="col-xs-7">
<input name="txt_SenarioName_" id="txt_SenarioName_" class="form-control" value="" />
</div>
<label class="label_contorl text-left message">*</label>
</div>
<div class="form-group col-xs-12">
<div class="col-xs-4 text-right">
<label class="label_contorl text-right" for="txt_YieldRateCurve_">收益率曲线:</label>
</div>
<div class="col-xs-7">
<asp:DropDownList ID="txt_YieldRateCurve_" name="txt_YieldRateCurve_" runat="server" CssClass="form-control datacontrol drop_combo"></asp:DropDownList>
</div>
<label class="label_contorl text-left message">*</label>
</div>
<div class="form-group col-xs-12">
<div class="col-xs-4 text-right">
<label class="label_contorl text-right" for="txt_SearchCloseDate_">曲线日期:</label>
</div>
<div class="col-xs-7">
<asp:DropDownList ID="txt_SearchCloseDate_" name="txt_SearchCloseDate_" onclick="WdatePicker()" Format="{0:yyyy-MM-dd}" runat="server" CssClass="form-control datacontrol drop_combo"></asp:DropDownList>
</div>
<label class="label_contorl text-left message">*</label>
</div>
<div class="form-group col-xs-12">
<div class="col-xs-4 text-right">
<label class="label_contorl text-right" for="txt_Currency_">货币:</label>
</div>
<div class="col-xs-7">
<asp:DropDownList ID="txt_Currency_" name="txt_Currency_" runat="server" CssClass=" datacontrol form-control"></asp:DropDownList>
</div>
<label class="label_contorl text-left message">*</label>
</div>
<div class="form-group col-xs-12">
<div class="col-xs-4 text-right">
<label class="label_contorl text-right" for="txt_EndUser_">使用单位:</label>
</div>
<div class="col-xs-7">
<asp:DropDownList ID="txt_EndUser_" name="txt_EndUser_" runat="server" CssClass=" datacontrol form-control"></asp:DropDownList>
</div>
<label class="label_contorl text-left message">*</label>
</div>
<div class="clearfix"></div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary btn-sm" id="btn_save1">确认</button>
<button type="button" class="btn btn-default btn-sm" data-dismiss="modal">关闭</button>
</div>
</div>
</form>
</div>
</div>
//添加新增验证规则
$('#myModal').bootstrapValidator({
feedbackIcons: {
valid: 'glyphicon glyphicon-ok',
invalid: 'glyphicon glyphicon-remove',
validating: 'glyphicon glyphicon-refresh'
},
fields: {
txt_SenarioName_: {
validators: {
notEmpty: {
message: '不能为空'
}
}
},
txt_YieldRateCurve_: {
validators: {
notEmpty: {
message: '不能为空'
}
}
},
txt_SearchCloseDate_: {
validators: {
notEmpty: {
message: '不能为空'
}
}
},
txt_Currency_: {
validators: {
notEmpty: {
message: '不能为空'
}
}
},
txt_EndUser_: {
validators: {
notEmpty: {
message: '不能为空'
}
}
}
}
}); $('#myModal').on('hide.bs.modal', function (e) {
$("#myModal").data('bootstrapValidator').resetForm()
}) function ModelValidate() { var bootstrapValidator = $("#myModal").data('bootstrapValidator');
//手动触发验证
$("#myModal").data('bootstrapValidator').validate()
if (bootstrapValidator.isValid()) {
console.log("tj")
//表单提交的方法、比如ajax提交
$('#myModal').modal('hide') }
else {
return false;
}
}
Bootstrap验证的更多相关文章
- Bootstrap验证控件的使用
前端HTML代码 <form id="myForm" method="post" class="form-horizontal" ac ...
- bootstrap validate 验证插件
1.需要引入bootstrapValidator.min.js 2.在需要验证的控件中添加 class="form-control" 3.js中写验证的方法 $('#psasave ...
- ASP.NET MVC使用Bootstrap系统(2)——使用Bootstrap CSS和HTML元素
阅读目录 Bootstrap 栅格(Grid)系统 Bootstrap HTML元素 Bootstrap 验证样式 ASP.NET MVC创建包含Bootstrap样式编辑模板 小结 Bootstra ...
- BootStrap-validator 使用记录(JAVA SpringMVC实现)
BootStrap 是一个强大的前面框架,它用优雅的方式解决了网页问题.最近正在使用其开发网站的表单验证,一点体会记录如下: 注:本文中借鉴了博客Franson 的文章<使用bootstrapv ...
- bootstrapvalidator API 文档地址: http://bootstrapvalidator.votintsev.ru/api/
bootstrap验证插件 bootstrapvalidator 文档API 地址 (原始作者英文):http://bootstrapvalidator.votintsev.ru/api/ 具体使用( ...
- Docker多机网络
前言 前面的文章主要聚焦于单机网络上,对于生产环境而言,单机环境不满足高可用的特点,所以是不具备上生产的条件,因此在开始Docker Swarm篇的时候我们先来聊聊多机网络之间Docker的通信如何做 ...
- bootstrap validate 实现页面动态验证(formvalidate)
关于基本的bootstrap validate 验证方法外面有许多博客上都有讲解,我就不在过多叙述了.大家也可以去看官网api:http://bv.doc.javake.cn/api/ 今天要说的是动 ...
- Bootstrap表单验证插件bootstrapValidator使用方法整理
插件介绍 先上一个图: 下载地址:https://github.com/nghuuphuoc/bootstrapvalidator 使用方法:http://www.cnblogs.com/huangc ...
- MVC遇上bootstrap后的ajax表单模型验证
MVC遇上bootstrap后的ajax表单验证 使用bootstrap后他由他自带的样式has-error,想要使用它就会比较麻烦,往常使用jqueyr.validate的话只有使用他自己的样式了, ...
随机推荐
- 最近开始研究php的缓存技术,来个系统自带的OPcache
最近开始研究php的缓存技术,来个系统自带的OPcache php5.5以上版本 系统自带 PHP5.2-5.4 可通过扩展来安装 OPcache是 zend出品 比apc的优势在于 长期更新 ...
- 19.XPath选择器
1.extract():提取数据 2./text() :获取节点内容文本 3./@href :获取节点href属性 4. @ :获取属性名称 需要注意问题: 用定义的规则那 ...
- OpenACC 《大规模并行处理器编程实战》教材讲解
▶ <大规模并行处理器编程实战>第15章,关于OpenACC 的部分,散点 ● OpenACC 中,主机存储器和设备存储器是分开处理的,程序员只要制定要传输的存储器对象即可,编译器会自动生 ...
- ASP.NET CMS: Administration Template
ASP.NET CMS: Administration Template For many creating advanced ASP.NET website or application admin ...
- Git .gitignore使用 -- 过滤class文件或指定目录
1. 进入当前的项目根目录 执行 git init touch .gitignore 2. 过滤class文件或指定目录 *.class /target/ 3. 提交 git add . 将所有文件提 ...
- Spring MVC 重定向
@RequestMapping("/testRedirect") public String testRedirect(){ System.out.println("te ...
- 在mfc中picture控件中显示Mat图片<转>
void ShowMatImgToWnd(CWnd* pWnd, cv::Mat img) { if(img.empty()) return; CRect drect; pWnd->GetCli ...
- Python之实例对象的增删改查
#实例对象的增删改查p1 = ChinesePeople('wangyue')#print (p1.__dict__) #查看实例对象的属性#print (p1.name)(p1.play_ball( ...
- Access-Control-Allow-Origin与跨域
文章转载地址: http://freewind.me/blog/20140327/2456.html 问题 在某域名下使用Ajax向另一个域名下的页面请求数据,会遇到跨域问题.另一个域名必须在resp ...
- 漫谈四种神经网络序列解码模型【附示例代码】 glimpse attention
漫谈四种神经网络序列解码模型[附示例代码] http://jacoxu.com/encoder_decoder/ [视觉注意力的循环神经网络模型]http://blog.csdn.net/leo_xu ...