bootstrap Validator 模態(tài)框、jsp、表單驗證 Ajax提交功能
更新時間：2017年02月17日 14:07:50 作者：Java軟件小白
這篇文章主要介紹了bootstrap Validator 模態(tài)框、jsp、表單驗證 Ajax提交功能的實現代碼，非常不錯，具有參考借鑒價值，需要的朋友參考下
效果圖：
如圖，這是使用Validator插件，所完成的功能，效果很強大，也很方便，這邊推薦使用這種方式，最后介紹一下原始js驗證寫法。
首先，導入插件：
<link href="<%=basePath %>bootstrap/css/bootstrap-datetimepicker.min.css" rel="external nofollow" rel="stylesheet" media="screen">
<script src="<%=basePath %>bootstrap/js/bootstrapValidator.min.js"></script> <script src="<%=basePath %>bootstrap/js/bootstrapValidator.zh_CN.js"></script> bootstrapvalidator源碼：https://github.com/nghuuphuoc/bootstrapvalidator boostrapvalidator api：http://bv.doc.javake.cn/api/
jsp：
<div class="modal fade" id="myModal_add" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel_add">新增</h4>
</div>
<div class="modal-body" style="height:680px;">
<form id="defaultForm" class="form-horizontal">
<div class="form-group">
<label class="col-sm-2 control-label" for="company_name">公司名稱</label>
<div class="col-sm-4">
<input class="form-control" id="company_name" type="text" placeholder="請輸入公司名稱" name="company_name"/>
</div>
<label class="col-sm-2 control-label" for="company_id">公司id</label>
<div class="col-sm-4">
<input class="form-control" id="company_id" type="text" placeholder="請輸入公司id" name="company_id"/>
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label" for="computer_room">機房</label>
<div class="col-sm-4">
<input class="form-control" id="computer_room" type="text" placeholder="請輸入機房"/>
</div>
<label class="col-sm-2 control-label" for="cabinet">機柜</label>
<div class="col-sm-4">
<input class="form-control" id="cabinet" type="text" placeholder="請輸入機柜"/>
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label" for="equipment_type">設備類型</label>
<div class="col-sm-4">
<input class="form-control" id="equipment_type" type="text" placeholder="請輸入設備類型"/>
</div>
<label class="col-sm-2 control-label" for="equipment_name">設備名稱</label>
<div class="col-sm-4">
<input class="form-control" id="equipment_name" type="text" placeholder="請輸入設備名稱"/>
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label" for="equipment_ip">設備ip</label>
<div class="col-sm-4">
<input class="form-control" id="equipment_ip" type="text" placeholder="請輸入設備ip" name="equipment_ip" />
</div>
<label class="col-sm-2 control-label" for="equipment_brand">設備品牌</label>
<div class="col-sm-4">
<input class="form-control" id="equipment_brand" type="text" placeholder="請輸入設備品牌"/>
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label" for="equipment_model">設備型號</label>
<div class="col-sm-4">
<input class="form-control" id="equipment_model" type="text" placeholder="請輸入設備型號"/>
</div>
<label class="col-sm-2 control-label" for="shelf_position">上架位置</label>
<div class="col-sm-4">
<input class="form-control" id="shelf_position" type="text" placeholder="請輸入上架位置"/>
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label" for="equipment_sn">設備SN號</label>
<div class="col-sm-4">
<input class="form-control" id="equipment_sn" type="text" placeholder="請輸入設備SN號"/>
</div>
<label class="col-sm-2 control-label" for="equipment_pn">設備PN號</label>
<div class="col-sm-4">
<input class="form-control" id="equipment_pn" type="text" placeholder="請輸入設備PN號"/>
</div>
</div>
</form>
</div>
<div class="modol-footer" id="button_sub">
<button type="reset" id="btn_reset" class="btn btn-default"><span class="glyphicon glyphicon-repeat" aria-hidden="true"></span>重置</button>
<button type="button" id="" name="submit" class="btn btn-primary submit_review"><span class="glyphicon glyphicon-floppy-disk" aria-hidden="true"></span>提交審核</button>
</div>
</div>
</div>
</div>
我這邊沒有使用表單提交驗證，而已點擊button按鈕，Ajax提交，注意一下。
js：
$(function(){/* 文檔加載，執(zhí)行一個函數*/
// $(".submit_review").attr({"disabled":"disabled"});
$('#defaultForm').bootstrapValidator({
message: 'This value is not valid',
feedbackIcons: {/*輸入框不同狀態(tài)，顯示圖片的樣式*/
valid: 'glyphicon glyphicon-ok',
invalid: 'glyphicon glyphicon-remove',
validating: 'glyphicon glyphicon-refresh'
},
fields: {/*驗證*/
company_name: {/*鍵名username和input name值對應*/
validators: {
notEmpty: {/*非空提示*/
message: '公司名稱不能為空'
},
// stringLength: {/*長度提示*/
// min: 6,
// max: 30,
// message: '用戶名在6到30之間'
// }/*最后一個沒有逗號*/
}
},
company_id: {
validators: {
notEmpty: {
message: '公司ID不能為空'
},
}
},
equipment_ip: {
validators: {
notEmpty: {
message: '設備IP不能為空'
},
regexp: {
regexp: /^(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])$/,
message: '設備IP不合法'
}
}
},
}
})
});
$("#btn_reset").click(function(event) {
/* Act on the event */
$('#defaultForm').data('bootstrapValidator').resetForm(true);
});
$("body").on('click', '#btn_submit_add', function(event) {
/* Act on the event */
$('#defaultForm').bootstrapValidator('validate');
var flag = $("#defaultForm").data('bootstrapValidator').isValid();
if (!flag) {
toastr.error("填寫有誤，請重新填寫！");
} else {
$.post('addEquipmentInfoCheck.action', {
"equipmentInfoCheck.companyId": $("#company_id").val(),
"equipmentInfoCheck.companyName": $("#company_name").val(),
"equipmentInfoCheck.machineRoom": $("#computer_room").val(),
"equipmentInfoCheck.equipmentCabinet": $("#cabinet").val(),
"equipmentInfoCheck.deviceType": $("#equipment_type").val(),
"equipmentInfoCheck.deviceName": $("#equipment_name").val(),
"equipmentInfoCheck.deviceIp": $("#equipment_ip").val(),
"equipmentInfoCheck.deviceBrand": $("#equipment_brand").val(),
"equipmentInfoCheck.deviceModel": $("#equipment_model").val(),
"equipmentInfoCheck.position": $("#shelf_position").val(),
"equipmentInfoCheck.deviceSn": $("#equipment_sn").val(),
"equipmentInfoCheck.devicePn": $("#equipment_pn").val(),
"equipmentInfoCheck.state":1
}, function(data, textStatus, xhr) {
/*optional stuff to do after success */
if (textStatus == "success") {
// e.preventDefault();
$('#defaultForm').data('bootstrapValidator').resetForm(true);
$("#myModal_add").modal('hide');
toastr.success("提交成功");
}else{
$("#myModal_add").modal('hide');
toastr.error("提交失敗");
}
});
}
});
OK，至此模態(tài)框驗證，提交就完成了~
下面附上原始js校驗：
$("#equipment_ip").blur(function(){
var reg = /^(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])$/ ;
var flag=reg.test($(this).val());
if(!flag){
toastr.error("IP不合法，請重新輸入");
$(this).val("");
}
);
以上所述是小編給大家介紹的bootstrap Validator 模態(tài)框、jsp、表單驗證 Ajax提交功能，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對腳本之家網站的支持！
相關文章
javascript full screen 全屏顯示頁面元素的方法
要想讓頁面的某個元素全屏顯示，就像在網頁上看視頻的時候，可以全屏觀看一樣，該怎么實現呢2013-09-09
本章節(jié)介紹一下如何實現未知寬高的元素在指定元素下實現垂直水平居中效果，代碼簡單易懂，需要的朋友可以參考下本文2015-09-09
本篇文章主要給大家詳細分析了javascript常用工具類的封裝相關知識點，有興趣的朋友參考下吧。2018-01-01
這篇文章主要介紹了JS動畫效果打開、關閉層的實現方法,可實現js控制層從中心位置打開與關閉的功能,涉及javascript操作頁面元素的相關技巧,需要的朋友可以參考下2015-05-05
廢話不多說,實現原理主要是處理table,生成tr td,其中最重要的是如何找出每月第一天是星期幾,然后就能對應出這個月的余下天數.2011-10-10
圖片加水印是一種常見的圖像處理技術,通常用于保護版權、防止盜用、增加圖片的識別度等多種場景,這篇文章主要給大家介紹了關于使用JavaScript給圖片添加水印的實現方法封裝,需要的朋友可以參考下2024-03-03
這篇文章主要介紹了JavaScript實現預覽本地上傳圖片功能,結合完整實例形式分析了javascript圖片預覽相關的格式正則驗證、瀏覽器判斷、頁面元素屬性動態(tài)操作相關實現技巧,需要的朋友可以參考下2019-03-03
這篇文章主要介紹了微信小程序基于canvas漸變實現的彩虹效果,結合實例形式分析了微信小程序線性漸變及圓形漸變的相關實現技巧,需要的朋友可以參考下2019-05-05
6個DIV 間隔一秒 輪番進行奇偶顯示. 比如先135 一秒后 246 然后再135 循環(huán)2010-07-07
這篇文章主要介紹了js實現人才網站職位選擇功能的方法,涉及javascript動態(tài)操作頁面元素結點的相關技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-08-08