浅析Bootstrap验证控件的使用


Posted in Javascript onJune 23, 2016

废话不多说,本文大概给大家分享两块代码,第一块前端HTML代码,第二块js代码,代码简单易懂,关键代码如下所示:

前端HTML代码

<form id="myForm" method="post" class="form-horizontal" action="/Task/Test">
<div class="modal-body">
<div class="form-group">
<label class="col-lg-3 control-label">任务名称</label>
<div class="col-lg-5">
<input type="text" class="form-control" name="takeName" id="takeName" />
</div>
</div>
<div class="form-group">
<label class="col-lg-3 control-label">程序集名称</label>
<div class="col-lg-5">
<input type="text" class="form-control" name="dllName" id="dllName" />
</div>
</div>
<div class="form-group">
<label class="col-lg-3 control-label">类名称</label>
<div class="col-lg-5">
<input type="text" class="form-control" name="methodName" id="methodName" />
</div>
</div>
<div class="form-group">
<label class="col-lg-3 control-label">cron表达</label>
<div class="col-lg-5">
<input type="text" class="form-control" name="cron" id="cron" />
</div>
</div>
<div class="form-group">
<label class="col-lg-3 control-label">表达式说明</label>
<div class="col-lg-5">
<input type="text" class="form-control" name="cronRemark" id="cronRemark" />
</div>
</div>
<div class="form-group">
<div class="col-lg-4 col-sm-4 col-xs-4">
<div class="checkbox">
<label>
<input type="checkbox" class="colored-success" checked="checked" id="enabled">
<span class="text">启用</span>
</label>
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default"
data-dismiss="modal">
关闭
</button>
<button type="submit" class="btn btn-primary"> 提交</button>
</div>
</form>

JS

<script>
$(document).ready(function () {
$("#myForm").bootstrapValidator({
message: 'This value is not valid',
feedbackIcons: {
valid: 'glyphicon glyphicon-ok',
invalid: 'glyphicon glyphicon-remove',
validating: 'glyphicon glyphicon-refresh'
},
fields: {
takeName: {
validators: {
notEmpty: {
message: '任务名称不能为空'
}
}
},
dllName: {
validators: {
notEmpty: {
message: '程序集名称不能为空'
},
//remote: {//ajax验证。server result:{"valid",true or false} 向服务发送当前input name值,获得一个json数据。例表示正确:{"valid",true} 
// url: '/Task/Test3',//验证地址
// message: '用户已存在',//提示消息
// delay :3000,
// type: 'POST',//请求方式
// /**自定义提交数据,默认值提交当前input value
// * data: function(validator) {
// return {
// password: $('[name="passwordNameAttributeInYourForm"]').val(),
// whatever: $('[name="whateverNameAttributeInYourForm"]').val()
// };
// }
// */
//},
}
},
methodName: {
validators: {
notEmpty: {
message: '类名称不能为空'
}
}
},
cron: {
validators: {
notEmpty: {
message: 'cron表达不能为空'
}
}
}
},
submitHandler: function (validator, form, submitButton) {
var taskData = {};
taskData.taskName = $('#takeName').val();
taskData.dllPath = $('#dllName').val();
taskData.methodName = $('#methodName').val();
taskData.cronExpression = $('#cron').val();
taskData.remark = $('#cronRemark').val();
taskData.enabled = $('#enabled').is(':checked');
$.ajax({
type: "post",
url: "/Task/AddTask",
data:taskData,
success: function (data) {
alert(data);
$('#myForm').data('bootstrapValidator').resetForm(true);
}
});
}
})
})
</script>

该方式为AJAX提交,提交事件写在submitHandler

以上所述是小编给大家介绍的Bootstrap验证控件的使用 的相关知识,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
javascript 通用简单的table选项卡实现
May 07 Javascript
javascript写的日历类(基于pj)
Dec 28 Javascript
Javascript面向对象之四 继承
Feb 08 Javascript
从零开始学习jQuery (八) 插播:jQuery实施方案
Feb 23 Javascript
Js 冒泡事件阻止实现代码
Jan 27 Javascript
jquery制作居中遮罩层效果分享
Feb 21 Javascript
js滑动提示效果代码分享
Mar 10 Javascript
Layer弹出层动态获取数据的方法
Aug 20 Javascript
vue添加axios,并且指定baseurl的方法
Sep 19 Javascript
angular2 组件之间通过service互相传递的实例
Sep 30 Javascript
详解node和ES6的模块导出与导入
Feb 19 Javascript
vue3中的组件间通信
Mar 31 Vue.js
jquery中live()方法和bind()方法区别分析
Jun 23 #Javascript
Bootstrap组件系列之福利篇几款好用的组件(推荐)
Jun 23 #Javascript
jQuery根据name属性进行查找的用法分析
Jun 23 #Javascript
每日十条JavaScript经验技巧(二)
Jun 23 #Javascript
jQuery实现查找最近父节点的方法
Jun 23 #Javascript
浅谈jquery中的each方法$.each、this.each、$.fn.each
Jun 23 #Javascript
每日十条JavaScript经验技巧(一)
Jun 23 #Javascript
You might like
不用GD库生成当前时间的PNG格式图象的程序
2006/10/09 PHP
php笔记之:有规律大文件的读取与写入的分析
2013/04/26 PHP
Yii Framework框架获取分类下面的所有子类方法
2014/06/20 PHP
PHP获取网站中各文章的第一张图片的代码示例
2016/05/20 PHP
基于jQuery的history历史记录插件
2010/12/11 Javascript
Js 时间函数getYear()的使用问题探讨
2013/04/01 Javascript
js自动生成的元素与页面原有元素发生堆叠的解决方法
2013/10/24 Javascript
两种方法实现在HTML页面加载完毕后运行某个js
2014/06/16 Javascript
jQuery实现下拉菜单(内容为时间)的实时更新及图表的随动更新的方法
2016/07/07 Javascript
jQuery实现鼠标经过购物车出现下拉框代码(推荐)
2016/07/21 Javascript
JavaScript仿微博输入框效果(案例分析)
2016/12/06 Javascript
nodejs开发微信小程序实现密码加密
2017/07/11 NodeJs
JS获取日期的方法实例【昨天,今天,明天,前n天,后n天的日期】
2017/09/28 Javascript
Vue单页及多页应用全局配置404页面实践记录
2018/05/22 Javascript
使用JS判断页面是首次被加载还是刷新
2019/05/26 Javascript
javascript跳转与返回和刷新页面的实例代码
2019/11/20 Javascript
JavaScript享元模式原理与用法实例详解
2020/03/09 Javascript
python类参数self使用示例
2014/02/17 Python
详解Python当中的字符串和编码
2015/04/25 Python
pandas将DataFrame的列变成行索引的方法
2018/04/10 Python
Pandas读取并修改excel的示例代码
2019/02/17 Python
pandas删除指定行详解
2019/04/04 Python
Python魔法方法功能与用法简介
2019/04/04 Python
使用python telnetlib批量备份交换机配置的方法
2019/07/25 Python
Django中间件拦截未登录url实例详解
2019/09/03 Python
TensorFlow实现从txt文件读取数据
2020/02/05 Python
关于Python3爬虫利器Appium的安装步骤
2020/07/29 Python
python 利用matplotlib在3D空间中绘制平面的案例
2021/02/06 Python
css3动画 小球滚动 js控制动画暂停
2019/11/29 HTML / CSS
详解Html5页面实现下载文件(apk、txt等)的三种方式
2018/10/22 HTML / CSS
State Cashmere官网:半零售价可持续蒙古羊绒
2020/02/26 全球购物
创先争优一句话承诺
2014/05/29 职场文书
购房意向书
2014/08/30 职场文书
不遵守课堂纪律的检讨书
2014/09/24 职场文书
实习协议书
2015/01/27 职场文书
单位实习介绍信
2015/05/05 职场文书