Bootstrapvalidator校驗(yàn)、校驗(yàn)清除重置的實(shí)現(xiàn)代碼(推薦)
1.引入css與js
bootstrapValidator.min.css
bootstrapValidator.min.js
2.html中的modal代碼
<div class="modal fade" id="editModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> <div class="modal-dialog"> <div class="modal-content" > <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> <h4 class="modal-title" id="editModalLabel"></h4> </div> <div class="modal-body"> <!-- form start --> <form class="form-horizontal" id="saveadmin_form" name="form-horizontal"> <input type="hidden" id="adminid" /> <div class="box-body"> <dl class="dl-horizontal"> <div class="form-group"> <div class="col-sm-10"> <dt>管理員名</dt> <dd> <lable id="edit_show_adminname"></lable> <input type="text" class="form-control" id="edit_adminName" name="edit_adminName" data-bv-notempty="true" name="edit_adminName"> </dd> </div> </div> <div class="form-group" id="div_password"> <div class="col-sm-10"> <dt>密碼</dt> <dd> <input type="text" class="form-control" name="edit_passwd" id="edit_passwd"> </dd> </div> </div> <div class="form-group" id="div_password1"> <div class="col-sm-10"> <dt>確認(rèn)密碼</dt> <dd> <input type="text" class="form-control" name="edit_passwd1" id="edit_passwd1"> </dd> </div> </div> <div class="form-group"> <div class="col-sm-10"> <dt>顯示名</dt> <dd> <input type="text" name="edit_displayName" class="form-control" id="edit_displayName"> </dd> </div> </div> <div class="form-group"> <div class="col-sm-10"> <dt>郵箱</dt> <dd> <input type="text" data-bv-notempty="true" name="edit_Mail" class="form-control" id="edit_Mail"> </dd> </div> </div> <div class="form-group"> <div class="col-sm-10"> <dt>備注</dt> <dd> <textarea class="form-control" name="edit_desc" rows="3" id="edit_desc"></textarea> </dd> </div> </div> </dl> </div> <!-- /.box-body --> <div class="modal-footer"> <!-- <button type="button" onclick="saveAdmin()" class="btn btn-default">保存</button> --> <button onclick="saveAdmin()" type="button" class="btn btn-success"> <i class="fa fa-check"></i> 保存 </button> <button type="button" class="btn btn-danger" data-dismiss="modal"> <i class="fa fa-times"></i> 關(guān)閉 </button> </div> </form> </div> </div> </div> </div>
3.js代碼
//保存 function saveAdmin(){ //開啟驗(yàn)證 $('#saveadmin_form').data('bootstrapValidator').validate(); if(!$('#saveadmin_form').data('bootstrapValidator').isValid()){ return ; } //表單提交 $.ajax({ type: "POST", dataType : 'json', url: "<%=request.getContextPath()%>/user/saveUser.html?ma="+Math.random(), data: { "type" :"0", "id":$("#adminid").val(), "account":$("#edit_adminName").val(), "display_name":$("#edit_displayName").val(), "password":$("#edit_passwd").val(), "mail":$("#edit_Mail").val(), "role":$("#edit_role").val(), "desc":$("#edit_desc").val() }, success :function(json) { json = eval("("+json+")"); $("#editModal").modal("hide"); $("#dialog_content").html(json.message); $("#dialog_button_queren").hide(); $("#dialog_modal").modal("show"); t.ajax.reload( null, true ); } }); } //初始化表單驗(yàn)證 $(document).ready(function() { formValidator(); }); /*********************************校驗(yàn)重置重點(diǎn)在這里 當(dāng)modal隱藏時(shí)銷毀驗(yàn)證再重新加載驗(yàn)證****************************************/ //Modal驗(yàn)證銷毀重構(gòu) $('#editModal').on('hidden.bs.modal', function() { $("#saveadmin_form").data('bootstrapValidator').destroy(); $('#saveadmin_form').data('bootstrapValidator', null); formValidator(); }); //form驗(yàn)證規(guī)則 function formValidator(){ $('#saveadmin_form').bootstrapValidator({ message: 'This value is not valid', feedbackIcons: { valid: 'glyphicon glyphicon-ok', invalid: 'glyphicon glyphicon-remove', validating: 'glyphicon glyphicon-refresh' }, fields: { //管理員名 edit_adminName: { message: '管理員名驗(yàn)證失敗', validators: { notEmpty: { message: '管理員名不能為空' }, stringLength: { min: 5, max: 64, message: '管理員名長(zhǎng)度必須在6到64位之間' } } }, //密碼 edit_passwd: { message: '密碼驗(yàn)證失敗', validators: { notEmpty: { message: '密碼不能為空' }, stringLength: { min: 5, max: 64, message: '密碼長(zhǎng)度在5到64之間' }/* , identical: { field: 'edit_passwd1', message: '兩次密碼不相同' } */ } }, //密碼確認(rèn) edit_passwd1: { message: '密碼確認(rèn)驗(yàn)證失敗', validators: { notEmpty: { message: '密碼確認(rèn)不能為空' }, identical: { field: 'edit_passwd', message: '兩次密碼不相同' } } }, //顯示名 edit_displayName: { message: '用戶名驗(yàn)證失敗', validators: { notEmpty: { message: '顯示名不能為空' }, stringLength: { min: 5, max: 128, message: '顯示名長(zhǎng)度必須在6到18位之間' } } }, //郵箱 edit_Mail: { validators: { notEmpty: { message: '郵箱不能為空' }, emailAddress: { message: '郵箱格式正確' }, stringLength: { max:256, message: '郵箱長(zhǎng)度必須小于256' } } }, //備注 edit_desc: { message: '備注驗(yàn)證失敗', validators: { stringLength: { max: 256, message: '備注長(zhǎng)度長(zhǎng)度必須小于256' } } }, } }); }
以上所述是小編給大家介紹的Bootstrapvalidator校驗(yàn)、校驗(yàn)清除重置的實(shí)現(xiàn)代碼(推薦),希望對(duì)大家有所幫助,如果大家有任何疑問(wèn)請(qǐng)給我留言,小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持!
- bootstrapValidator.min.js表單驗(yàn)證插件
- bootstrapValidator表單驗(yàn)證插件學(xué)習(xí)
- Bootstrap中的表單驗(yàn)證插件bootstrapValidator使用方法整理(推薦)
- 實(shí)用又漂亮的BootstrapValidator表單驗(yàn)證插件
- BootstrapValidator超詳細(xì)教程(推薦)
- jquery插件bootstrapValidator數(shù)據(jù)驗(yàn)證詳解
- bootstrapValidator bootstrap-select驗(yàn)證不可用的解決辦法
- BootstrapValidator實(shí)現(xiàn)注冊(cè)校驗(yàn)和登錄錯(cuò)誤提示效果
- 基于jQuery 實(shí)現(xiàn)bootstrapValidator下的全局驗(yàn)證
- Bootstrap簡(jiǎn)單實(shí)用的表單驗(yàn)證插件BootstrapValidator用法實(shí)例詳解
相關(guān)文章
bootstrap table合并行數(shù)據(jù)并居中對(duì)齊效果
這篇文章主要為大家詳細(xì)介紹了bootstrap table合并行數(shù)據(jù)并居中對(duì)齊效果,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2018-10-10javascript showModalDialog模態(tài)對(duì)話框使用說(shuō)明
使用javascript打開模態(tài)對(duì)話框,想學(xué)習(xí)showModalDialog使用方法的朋友可以參考下。2009-12-12javascript實(shí)現(xiàn)緩動(dòng)動(dòng)畫效果
這篇文章主要為大家詳細(xì)介紹了javascript實(shí)現(xiàn)緩動(dòng)動(dòng)畫效果,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2021-09-09clipboard.js無(wú)需Flash無(wú)需依賴任何JS庫(kù)實(shí)現(xiàn)文本復(fù)制與剪切
這篇文章主要實(shí)現(xiàn)了無(wú)需Flash無(wú)需依賴任何JS庫(kù)實(shí)現(xiàn)文本復(fù)制與剪切,是一款極現(xiàn)代的,不需要flash,不依賴任何其他js庫(kù)的非常小的插件,叫clipboard.js,感興趣的小伙伴們可以參考一下2015-10-10php is_numberic函數(shù)造成的SQL注入漏洞
這篇文章主要介紹了php is_numberic函數(shù)造成的SQL注入漏洞和解決辦法,需要的朋友可以參考下2014-03-03JS運(yùn)動(dòng)特效之任意值添加運(yùn)動(dòng)的方法分析
這篇文章主要介紹了JS運(yùn)動(dòng)特效之任意值添加運(yùn)動(dòng)的方法,結(jié)合實(shí)例形式分析了javascript針對(duì)多物體運(yùn)動(dòng)通過(guò)參數(shù)控制不同運(yùn)動(dòng)效果的實(shí)現(xiàn)方法,需要的朋友可以參考下2018-01-01一文帶你掌握掌握J(rèn)avaScript中不同屬性類型的細(xì)節(jié)
JavaScript是一種功能強(qiáng)大的編程語(yǔ)言,支持面向?qū)ο蟮木幊谭妒?,本文將介紹JavaScript中面向?qū)ο缶幊痰幕靖拍睿▽?duì)象、屬性類型、定義多個(gè)屬性和讀取屬性的特性2023-06-06javascript刪除option選項(xiàng)的多種方法總結(jié)
這篇文章主要是對(duì)javascript刪除option選項(xiàng)的多種方法進(jìn)行了詳細(xì)的總結(jié)介紹,需要的朋友可以過(guò)來(lái)參考下,希望對(duì)大家有所幫助2013-11-11