国产探花免费观看_亚洲丰满少妇自慰呻吟_97日韩有码在线_资源在线日韩欧美_一区二区精品毛片,辰东完美世界有声小说,欢乐颂第一季,yy玄幻小说排行榜完本

首頁 > 編程 > JavaScript > 正文

bootstrap Validator 模態框、jsp、表單驗證 Ajax提交功能

2019-11-19 17:31:52
字體:
來源:轉載
供稿:網友

效果圖:

如圖,這是使用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/bootstrapvalidatorboostrapvalidator 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(){/* 文檔加載,執行一個函數*/ // $(".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: {/*鍵名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,至此模態框驗證,提交就完成了~

下面附上原始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提交功能,希望對大家有所幫助,如果大家有任何疑問請給我留言,小編會及時回復大家的。在此也非常感謝大家對武林網網站的支持!

發表評論 共有條評論
用戶名: 密碼:
驗證碼: 匿名發表
主站蜘蛛池模板: 陕西省| 临沭县| 恩施市| 绥阳县| 岚皋县| 民县| 唐海县| 嘉义市| 江华| 屏南县| 砚山县| 滨海县| 缙云县| 宝应县| 皮山县| 白河县| 寻乌县| 城市| 黄大仙区| 易门县| 沂南县| 汉中市| 广德县| 班戈县| 景泰县| 福建省| 禹州市| 蕉岭县| 沾益县| 葵青区| 民县| 卢湾区| 南昌县| 多伦县| 武平县| 左权县| 盈江县| 曲松县| 五大连池市| 南乐县| 胶州市|