bootstrap Validator 模态框、jsp、表单验证 Ajax提交功能

效果图：

如图，这是使用Validator插件，所完成的功能，效果很强大，也很方便，这边推荐使用这种方式，最后介绍一下原始js验证写法。

首先，导入插件：

 
 
bootstrapvalidator源码：https://github.com/nghuuphuoc/bootstrapvalidator
boostrapvalidator api：http://bv.doc.javake.cn/api/

jsp：

 
   
    
     
     × 
     
新增 
     
     


      
      重置 
      提交审核 
      
    
   
 

我这边没有使用表单提交验证，而已点击button按钮，Ajax提交，注意一下。

js：

$(function(){ 
// $(".submit_review").attr({"disabled":"disabled"}); 
 $('#defaultForm').bootstrapValidator({ 
    message: 'This value is not valid', 
    feedbackIcons: { 
     valid: 'glyphicon glyphicon-ok', 
     invalid: 'glyphicon glyphicon-remove', 
     validating: 'glyphicon glyphicon-refresh' 
    }, 
    fields: { 
     company_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}|1dd|2[0-4]d|25[0-5]).(d{1,2}|1dd|2[0-4]d|25[0-5]).(d{1,2}|1dd|2[0-4]d|25[0-5]).(d{1,2}|1dd|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}|1dd|2[0-4]d|25[0-5]).(d{1,2}|1dd|2[0-4]d|25[0-5]).(d{1,2}|1dd|2[0-4]d|25[0-5]).(d{1,2}|1dd|2[0-4]d|25[0-5])$/ ;  
 var flag=reg.test($(this).val()); 
 if(!flag){ 
 toastr.error("IP不合法，请重新输入"); 
 $(this).val(""); 
 } 
); 

以上所述是小编给大家介绍的bootstrap Validator 模态框、jsp、表单验证 Ajax提交功能，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对考高分网网站的支持！