bootstrap+Validator如何實(shí)現(xiàn)模態(tài)框、jsp、表單驗(yàn)證Ajax提交功能

這篇文章主要介紹bootstrap+Validator如何實(shí)現(xiàn)模態(tài)框、jsp、表單驗(yàn)證 Ajax提交功能，文中介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們一定要看完！

專(zhuān)注于為中小企業(yè)提供成都做網(wǎng)站、成都網(wǎng)站建設(shè)、成都外貿(mào)網(wǎng)站建設(shè)服務(wù),電腦端+手機(jī)端+微信端的三站合一,更高效的管理,為中小企業(yè)余杭免費(fèi)做網(wǎng)站提供優(yōu)質(zhì)的服務(wù)。我們立足成都，凝聚了一批互聯(lián)網(wǎng)行業(yè)人才，有力地推動(dòng)了成百上千企業(yè)的穩(wěn)健成長(zhǎng)，幫助中小企業(yè)通過(guò)網(wǎng)站建設(shè)實(shí)現(xiàn)規(guī)模擴(kuò)充和轉(zhuǎn)變。

效果圖：

bootstrap+Validator如何實(shí)現(xiàn)模態(tài)框、jsp、表單驗(yàn)證 Ajax提交功能

如圖，這是使用Validator插件，所完成的功能，效果很強(qiáng)大，也很方便，這邊推薦使用這種方式，最后介紹一下原始js驗(yàn)證寫(xiě)法。

首先，導(dǎo)入插件：

<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> 
     <h5 class="modal-title" id="myModalLabel_add">新增</h5> 
    </div> 
    <div class="modal-body" > 
      <form id="defaultForm" class="form-horizontal"> 
       <div class="form-group"> 
        <label class="col-sm-2 control-label" for="company_name">公司名稱(chēng)</label> 
        <div class="col-sm-4"> 
         <input class="form-control" id="company_name" type="text" placeholder="請(qǐng)輸入公司名稱(chēng)" 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="請(qǐng)輸入公司id" name="company_id"/> 
        </div> 
       </div> 
       <div class="form-group"> 
        <label class="col-sm-2 control-label" for="computer_room">機(jī)房</label> 
        <div class="col-sm-4"> 
         <input class="form-control" id="computer_room" type="text" placeholder="請(qǐng)輸入機(jī)房"/> 
        </div> 
        <label class="col-sm-2 control-label" for="cabinet">機(jī)柜</label> 
        <div class="col-sm-4"> 
         <input class="form-control" id="cabinet" type="text" placeholder="請(qǐng)輸入機(jī)柜"/> 
        </div> 
       </div> 
       <div class="form-group"> 
        <label class="col-sm-2 control-label" for="equipment_type">設(shè)備類(lèi)型</label> 
        <div class="col-sm-4"> 
         <input class="form-control" id="equipment_type" type="text" placeholder="請(qǐng)輸入設(shè)備類(lèi)型"/> 
        </div> 
        <label class="col-sm-2 control-label" for="equipment_name">設(shè)備名稱(chēng)</label> 
        <div class="col-sm-4"> 
         <input class="form-control" id="equipment_name" type="text" placeholder="請(qǐng)輸入設(shè)備名稱(chēng)"/> 
        </div> 
       </div> 
       <div class="form-group"> 
        <label class="col-sm-2 control-label" for="equipment_ip">設(shè)備ip</label> 
        <div class="col-sm-4"> 
         <input class="form-control" id="equipment_ip" type="text" placeholder="請(qǐng)輸入設(shè)備ip" name="equipment_ip" /> 
        </div> 
        <label class="col-sm-2 control-label" for="equipment_brand">設(shè)備品牌</label> 
        <div class="col-sm-4"> 
         <input class="form-control" id="equipment_brand" type="text" placeholder="請(qǐng)輸入設(shè)備品牌"/> 
        </div> 
       </div> 
       <div class="form-group"> 
        <label class="col-sm-2 control-label" for="equipment_model">設(shè)備型號(hào)</label> 
        <div class="col-sm-4"> 
         <input class="form-control" id="equipment_model" type="text" placeholder="請(qǐng)輸入設(shè)備型號(hào)"/> 
        </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="請(qǐng)輸入上架位置"/> 
        </div> 
       </div> 
       <div class="form-group"> 
        <label class="col-sm-2 control-label" for="equipment_sn">設(shè)備SN號(hào)</label> 
        <div class="col-sm-4"> 
         <input class="form-control" id="equipment_sn" type="text" placeholder="請(qǐng)輸入設(shè)備SN號(hào)"/> 
        </div> 
        <label class="col-sm-2 control-label" for="equipment_pn">設(shè)備PN號(hào)</label> 
        <div class="col-sm-4"> 
         <input class="form-control" id="equipment_pn" type="text" placeholder="請(qǐng)輸入設(shè)備PN號(hào)"/> 
        </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>

我這邊沒(méi)有使用表單提交驗(yàn)證，而已點(diǎn)擊button按鈕，Ajax提交，注意一下。

js：

$(function(){/* 文檔加載，執(zhí)行一個(gè)函數(shù)*/ 
// $(".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: {/*驗(yàn)證*/ 
     company_name: {/*鍵名username和input name值對(duì)應(yīng)*/ 
      validators: { 
       notEmpty: {/*非空提示*/ 
        message: '公司名稱(chēng)不能為空' 
       }, 
//       stringLength: {/*長(zhǎng)度提示*/ 
//        min: 6, 
//        max: 30, 
//        message: '用戶(hù)名在6到30之間' 
//       }/*最后一個(gè)沒(méi)有逗號(hào)*/ 
      } 
     }, 
     company_id: { 
      validators: { 
       notEmpty: { 
        message: '公司ID不能為空' 
       }, 
      } 
     }, 
     equipment_ip: { 
      validators: { 
       notEmpty: { 
        message: '設(shè)備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: '設(shè)備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("填寫(xiě)有誤，請(qǐng)重新填寫(xiě)！"); 
  } 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)框驗(yàn)證，提交就完成了~

下面附上原始js校驗(yàn)：

$("#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不合法，請(qǐng)重新輸入"); 
 $(this).val(""); 
 } 
);

以上是“bootstrap+Validator如何實(shí)現(xiàn)模態(tài)框、jsp、表單驗(yàn)證 Ajax提交功能”這篇文章的所有內(nèi)容，感謝各位的閱讀！希望分享的內(nèi)容對(duì)大家有幫助，更多相關(guān)知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！

文章標(biāo)題：bootstrap+Validator如何實(shí)現(xiàn)模態(tài)框、jsp、表單驗(yàn)證Ajax提交功能
標(biāo)題路徑：http://bm7419.com/article26/gegpjg.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供手機(jī)網(wǎng)站建設(shè)、電子商務(wù)、自適應(yīng)網(wǎng)站、動(dòng)態(tài)網(wǎng)站、網(wǎng)站維護(hù)、App設(shè)計(jì)

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶(hù)投稿、用戶(hù)轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容