Bootstrapvalidator校驗、校驗清除重置的實現(xiàn)代碼(推薦)
更新時間:2016年09月28日 10:50:14 作者:zhangtongzct
這篇文章給大家介紹了bootstrapvalidator校驗、校驗清除重置的實現(xiàn)代碼,在代碼中需要我們引入css與js文件,大家可以參考下文的代碼
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>確認密碼</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(){
//開啟驗證
$('#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 );
}
});
}
//初始化表單驗證
$(document).ready(function() {
formValidator();
});
/*********************************校驗重置重點在這里 當modal隱藏時銷毀驗證再重新加載驗證****************************************/
//Modal驗證銷毀重構(gòu)
$('#editModal').on('hidden.bs.modal', function() {
$("#saveadmin_form").data('bootstrapValidator').destroy();
$('#saveadmin_form').data('bootstrapValidator', null);
formValidator();
});
//form驗證規(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: '管理員名驗證失敗',
validators: {
notEmpty: {
message: '管理員名不能為空'
},
stringLength: {
min: 5,
max: 64,
message: '管理員名長度必須在6到64位之間'
}
}
},
//密碼
edit_passwd: {
message: '密碼驗證失敗',
validators: {
notEmpty: {
message: '密碼不能為空'
},
stringLength: {
min: 5,
max: 64,
message: '密碼長度在5到64之間'
}/* ,
identical: {
field: 'edit_passwd1',
message: '兩次密碼不相同'
} */
}
},
//密碼確認
edit_passwd1: {
message: '密碼確認驗證失敗',
validators: {
notEmpty: {
message: '密碼確認不能為空'
},
identical: {
field: 'edit_passwd',
message: '兩次密碼不相同'
}
}
},
//顯示名
edit_displayName: {
message: '用戶名驗證失敗',
validators: {
notEmpty: {
message: '顯示名不能為空'
},
stringLength: {
min: 5,
max: 128,
message: '顯示名長度必須在6到18位之間'
}
}
},
//郵箱
edit_Mail: {
validators: {
notEmpty: {
message: '郵箱不能為空'
},
emailAddress: {
message: '郵箱格式正確'
},
stringLength: {
max:256,
message: '郵箱長度必須小于256'
}
}
},
//備注
edit_desc: {
message: '備注驗證失敗',
validators: {
stringLength: {
max: 256,
message: '備注長度長度必須小于256'
}
}
},
}
});
}
以上所述是小編給大家介紹的Bootstrapvalidator校驗、校驗清除重置的實現(xiàn)代碼(推薦),希望對大家有所幫助,如果大家有任何疑問請給我留言,小編會及時回復大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持!
您可能感興趣的文章:
- bootstrapValidator.min.js表單驗證插件
- bootstrapValidator表單驗證插件學習
- Bootstrap中的表單驗證插件bootstrapValidator使用方法整理(推薦)
- 實用又漂亮的BootstrapValidator表單驗證插件
- BootstrapValidator超詳細教程(推薦)
- jquery插件bootstrapValidator數(shù)據(jù)驗證詳解
- bootstrapValidator bootstrap-select驗證不可用的解決辦法
- BootstrapValidator實現(xiàn)注冊校驗和登錄錯誤提示效果
- 基于jQuery 實現(xiàn)bootstrapValidator下的全局驗證
- Bootstrap簡單實用的表單驗證插件BootstrapValidator用法實例詳解
相關(guān)文章
使用?TypeScript?開發(fā)?React?函數(shù)式組件
這篇文章主要介紹了使用?TypeScript開發(fā)React函數(shù)式組件,文章通過圍繞主題展開詳細的內(nèi)容介紹,具有一定的參考價值,感興趣的小伙伴可以參考一下2022-08-08
JS腳本根據(jù)手機瀏覽器類型跳轉(zhuǎn)WAP手機網(wǎng)站(兩種方式)
隨著移動互聯(lián)網(wǎng)的不斷普及,企業(yè)的網(wǎng)絡(luò)宣傳不僅只局限在PC端,還要在移動端發(fā)展。我們在自己的網(wǎng)站做了WAP手機完整之后,如果有用戶通過手機訪問我們的企業(yè)頂級域名網(wǎng)站,就要判斷跳轉(zhuǎn)到專為的WAP網(wǎng)站,下面小編給大家整理有關(guān)手機瀏覽器跳轉(zhuǎn)WAP手機網(wǎng)站的相關(guān)內(nèi)容2015-08-08

