bootstrapValidator 插件

本文详细介绍了一个使用Bootstrap Validator插件进行表单验证的具体案例,包括HTML结构、JS事件处理和定义部分,展示了如何通过JavaScript控制表单提交,并对表单字段进行有效性检查。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

1 有关内容:https://blog.youkuaiyun.com/u013938465/article/details/53507109

      https://blog.youkuaiyun.com/wangtongxue123456/article/details/77098054

 

2 具体使用情况:

html:

<form method="post" class="form-horizontal" id="dataForm">
......
<div class="col-xs-9 col-xs-offset-2">
<button type="button" class="btn btn-primary" onclick="submit_action()">提交</button>
</div>
.......
</form>

js:事件
var person_arr = [];
var submiting = false;
function submit_action(){
if(submiting) return;
submiting = true;
$("#dataForm").bootstrapValidator('validate');
if (!$("#dataForm").data('bootstrapValidator').isValid()) {
submiting = false;
return;
}
var name = $("#polling-name").val();
if(name==''){
layer.alert('巡检名称不能为空',{icon: 2});submiting = false;return;
}
var person_id = $("#person-select select").val();
if(person_id=='' || person_id == null){
layer.alert('请选择巡检人员',{icon: 2});submiting = false;return;
}
var device_id = $("#device-select select").val();
if(!device_id){
layer.alert('请选择巡检签到设备',{icon: 2});submiting = false;return;
}
$("#dataForm").data('bootstrapValidator').defaultSubmit();
}
js:定义
$(function () {
$("#dataForm").bootstrapValidator({
message: 'This value is not valid',
feedbackIcons: {
valid: 'glyphicon glyphicon-ok',
invalid: 'glyphicon glyphicon-remove',
validating: 'glyphicon glyphicon-refresh'
},
fields: {
name: {
message: '巡检任务名称验证失败!',
validators: {
notEmpty: {
message: '巡检任务名称不能为空!'
},
stringLength: {
min: 1,
max: 25,
message: '巡检任务名称长度不能超过25!'
},
regexp: {
regexp: /^[\u4e00-\u9fa5_a-zA-Z0-9]+$/,
message: '巡检任务名称只能输入中文,英文字母和数字及_'
}
}
}
}
});
});

引入:
{{ javascript_include('js/bootstrapValidator.min.js')}}

拓展:
<div id="person-select" style="display: none;">
<label class="col-xs-2 help-block text-right">指定巡检人员</label>
<div class="col-xs-3">
<select name="person_id" class="form-control" onchange="staffSelect(event)">
<option value="">请选择</option>
</select>
</div>
</div>

js下运用:
var person_id = $("#person-select select").val();
 


转载于:https://www.cnblogs.com/yang1com/p/10714895.html

内容概要:本文详细介绍了900W或1Kw,20V-90V 10A双管正激可调电源充电机的研发过程和技术细节。首先阐述了项目背景,强调了充电机在电动汽车和可再生能源领域的重要地位。接着深入探讨了硬件设计方面,包括PCB设计、磁性器件的选择及其对高功率因数的影响。随后介绍了软件实现,特别是程序代码中关键的保护功能如过流保护的具体实现方法。此外,文中还提到了充电机所具备的各种保护机制,如短路保护、欠压保护、电池反接保护、过流保护和过温度保护,确保设备的安全性和可靠性。通讯功能方面,支持RS232隔离通讯,采用自定义协议实现远程监控和控制。最后讨论了散热设计的重要性,以及为满足量产需求所做的准备工作,包括提供详细的PCB图、程序代码、BOM清单、磁性器件和散热片规格书等源文件。 适合人群:从事电力电子产品研发的技术人员,尤其是关注电动汽车充电解决方案的专业人士。 使用场景及目标:适用于需要高效、可靠充电解决方案的企业和个人开发者,旨在帮助他们快速理解和应用双管正激充电机的设计理念和技术要点,从而加速产品开发进程。 其他说明:本文不仅涵盖了理论知识,还包括具体的工程实践案例,对于想要深入了解充电机内部构造和工作原理的人来说是非常有价值的参考资料。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值