发布于 2017-03-06 17:07:20 | 22 次阅读 | 评论: 0 | 来源: 网友投递

这里有新鲜出炉的Bootstrap v3教程,程序狗速度看过来!

Bootstrap Web前端CSS框架

Bootstrap是Twitter推出的一个开源的用于前端开发的工具包。它由Twitter的设计师Mark Otto和Jacob Thornton合作开发,是一个CSS/HTML框架。Bootstrap提供了优雅的HTML和CSS规范,它即是由动态CSS语言Less写成。Bootstrap一经推出后颇受欢迎,一直是GitHub上的热门开源项目,包括NASA的MSNBC(微软全国广播公司)的Breaking News都使用了该项目。


这篇文章主要介绍了浅析Bootstrap验证控件的使用 的相关资料,非常不错具有参考借鉴价值,需要的朋友可以参考下

废话不多说,本文大概给大家分享两块代码,第一块前端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验证控件的使用 的相关知识,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对phperz网站的支持!



相关阅读 :
浅析Bootstrap验证控件的使用
详解BootStrap中Affix控件的使用及保持布局的美观的方法
浅析BootStrap模态框的使用(经典)
针对BootStrap中tabs控件的美化和完善(推荐)
Bootstrap树形控件使用方法详解
Bootstrap表单控件学习使用
Bootstrap 3的box-sizing样式导致UEditor控件的图片无法正常缩放的解决方案
Bootstrap carousel轮转图的使用实例详解
BOOTSTRAP时间控件显示在模态框下面的bug修复
全面解析Bootstrap表单样式的使用
bootstrap日期控件问题(双日期、清空等问题解决)
BootStrap在jsp中的使用
最新网友评论  共有(0)条评论 发布评论 返回顶部

Copyright © 2007-2017 PHPERZ.COM All Rights Reserved   冀ICP备14009818号  版权声明  广告服务