English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
効果画像：
図のように、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>
私のところではフォームの送信検証を使用していないため、ボタンをクリックしてAjaxを送信しました。注意してください。
js：
$(function(){/* ドキュメントが読み込まれたとき、関数を実行します*/
// $(".submit_review").attr({"disabled":"disabled"});
$('#defaultForm').bootstrapValidator({
message: 'この値は有効ではありません'
feedbackIcons: {/*入力ボックスの異なる状態で表示される画像のスタイル*/
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) {
/* イベントに対して行動を起こす */
$（'#defaultForm'）.data（'bootstrapValidator'）.resetForm（true）；
});
$("body").on('click', '#btn_submit_add', function(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) {
/*成功後に行うオプションの事項 */
if (textStatus == "success") {
// e.preventDefault（）;
$（'#defaultForm'）.data（'bootstrapValidator'）.resetForm（true）；
$（"#myModal_add"）.modal（'hide'）；
toastr.success（"提出成功"）；
}else{
$（"#myModal_add"）.modal（'hide'）；
toastr.error（"提出失敗"）；
}
});
}
});
OK、ここでモーダルボックスのバリデーションと提出が完了しました~
以下に元の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 モーダルボックス、jsp、フォームのバリデーション、Ajax 提交機能です。皆さんの助けになることを願っています。何かご不明な点がございましたら、コメントを残してください。編集者は皆さんの質問に迅速に回答します。また、皆さんの呐喊教程サイトに対するサポートに感謝しています。
声明：本文の内容はインターネットから取得しており、著作権者はすべて所有しています。インターネットユーザーが自発的に貢献し、自己でアップロードしたものであり、本サイトは所有権を持ちません。また、人工的な編集は行われておらず、関連する法的責任も負いません。著作権侵害を疑う内容がある場合は、メールを送信して：notice#wまでご連絡ください。3codebox.com（メールを送信する際に、#を@に変更してください。報告を行い、関連する証拠を提供してください。一旦確認が取れましたら、本サイトは即座に侵害疑いのコンテンツを削除します。