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的话只有使用他自己的样式了, ...
随机推荐
- 【C语言】09条件编译
条件编译的概念;通常我们希望程序的其中一部分代码只有在满足一定的情况下才进行编译,否则不参与编译,(只有参与编译的代码最终才能被执行) 这就是条件编译; 基本用法; #if condication01 ...
- centos7.3使用squid搭建代理服务器
centos7.3使用squid搭建代理服务器 1 安装 yum install squid 2 编辑 vi /etc/squid/squid.conf 3 设置 最底部增加 如下http_acces ...
- ASCII和万国码
ASCII和万国码 什么是ASCII 计算机的起初是使用内存中的0101来表示数和机器码.如何用内存中的bit来表示文本一直困扰着人们,毕竟人类主要的信息展示是文字,而不是苦涩的0101.后来ASCI ...
- Python 中一个逗号引发的悲剧
遇到一个 Python 字符串的坑,记录一下.看看下面这些代码 >>> a = [ ... 'foo' ... 'bar', ... 'tree' ... ] >>> ...
- linux系统更新rpm包问题 ,报错rhn-check-2.0.2-5.el7.noarch has missing requires of yum-rhn-plugin >= ('0', '1.6.4', '1')
报错信息: rhn-check-2.0.2-5.el7.noarch has missing requires of yum-rhn-plugin >= ('0', '1.6.4', '1') ...
- DataSnap Server HTTP json格式修改 返回图片
DataSnap Server HTTP json 格式修改 http://127.0.0.1:8080/datasnap/rest/TServerMethods1/EchoString/hello ...
- discuz 标签详解
Discuz 模板标签说明 Discuz! 的模板采用近似 PHP 表达式的语法,基本都是可识别的HTML,但涉及到变量和动态内容时,基本形式下: <!-{ 代码内容 }-> 逻辑元素包围 ...
- dir 使用,统计文件数量
dir /b /a-d | find /v /c "$$$$" >1.log--※ 来源:·水木社区 newsmth.net·[FROM: 125.46.17.*] 今天去水 ...
- OpenSL ES 查询设备支持的SL Profiles
opensl es 提供了三种类型:分别是 SL_PROFILES_PHONE(手机):SL_PROFILES_MUSIC(音乐); SL_PROFILES_GAME (游戏). 如果你使用的手机的开 ...
- IExpress 制作安装包 注意事项
被打包的文件名不能超过8个字符,否则iexpress会取前6个字符 + "~1".