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="닫기"><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) {
/*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, 이제 모달 검증과 제출이 완료되었습니다~
원래 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가 유효하지 않습니다. 다시 입력하십시오.");
$.val("");
}
);
위에 설명한 것은 저가 여러분께 소개한 bootstrap Validator 모달, jsp, 양식�� Ajax 제출 기능입니다. 여러분의 도움이 되길 바랍니다. 어떤 질문이나 의문이 있으면 댓글을 남겨 주시면, 저는 즉시 답변을 드리겠습니다. 또한,呐喊 교육 웹사이트에 대한 여러분의 지지에 깊이 감사드립니다！
선언：이 문서의 내용은 인터넷에서 가져왔으며, 원작자의 소유물입니다. 인터넷 사용자가 자발적으로 기여하고 업로드한 내용으로, 이 웹사이트는 소유권을 가지지 않으며, 인공적인 편집 처리를 하지 않았으며, 관련 법적 책임도 부담하지 않습니다. 저작권 문제가 있는 내용을 발견하면 메일을 보내 주시기 바랍니다.: notice#oldtoolbag.com（메일을 보내는 경우, #을 @으로 변경하십시오. 신고하고 관련 증거를 제공하시면, 해당 내용이 확인되면 즉시 해당 내용을 삭제할 것입니다。）