Bootstrapvalidator校验、校验清除重置的实现代码(推荐)
1.引入css与js
bootstrapValidator.min.css
bootstrapValidator.min.js
2.html中的modal代码
<divclass="modalfade"id="editModal"tabindex="-1"role="dialog" aria-labelledby="myModalLabel"aria-hidden="true"> <divclass="modal-dialog"> <divclass="modal-content"> <divclass="modal-header"> <buttontype="button"class="close"data-dismiss="modal" aria-hidden="true">×</button> <h4class="modal-title"id="editModalLabel"></h4> </div> <divclass="modal-body"> <!--formstart--> <formclass="form-horizontal"id="saveadmin_form" name="form-horizontal"> <inputtype="hidden"id="adminid"/> <divclass="box-body"> <dlclass="dl-horizontal"> <divclass="form-group"> <divclass="col-sm-10"> <dt>管理员名</dt> <dd> <lableid="edit_show_adminname"></lable> <inputtype="text"class="form-control"id="edit_adminName" name="edit_adminName"data-bv-notempty="true" name="edit_adminName"> </dd> </div> </div> <divclass="form-group"id="div_password"> <divclass="col-sm-10"> <dt>密码</dt> <dd> <inputtype="text"class="form-control"name="edit_passwd" id="edit_passwd"> </dd> </div> </div> <divclass="form-group"id="div_password1"> <divclass="col-sm-10"> <dt>确认密码</dt> <dd> <inputtype="text"class="form-control"name="edit_passwd1" id="edit_passwd1"> </dd> </div> </div> <divclass="form-group"> <divclass="col-sm-10"> <dt>显示名</dt> <dd> <inputtype="text"name="edit_displayName" class="form-control"id="edit_displayName"> </dd> </div> </div> <divclass="form-group"> <divclass="col-sm-10"> <dt>邮箱</dt> <dd> <inputtype="text"data-bv-notempty="true"name="edit_Mail" class="form-control"id="edit_Mail"> </dd> </div> </div> <divclass="form-group"> <divclass="col-sm-10"> <dt>备注</dt> <dd> <textareaclass="form-control"name="edit_desc"rows="3" id="edit_desc"></textarea> </dd> </div> </div> </dl> </div> <!--/.box-body--> <divclass="modal-footer"> <!--<buttontype="button"onclick="saveAdmin()"class="btnbtn-default">保存</button>--> <buttononclick="saveAdmin()"type="button"class="btnbtn-success"> <iclass="fafa-check"></i>保存 </button> <buttontype="button"class="btnbtn-danger"data-dismiss="modal"> <iclass="fafa-times"></i>关闭 </button> </div> </form> </div> </div> </div> </div>
3.js代码
//保存
functionsaveAdmin(){
//开启验证
$('#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验证销毁重构
$('#editModal').on('hidden.bs.modal',function(){
$("#saveadmin_form").data('bootstrapValidator').destroy();
$('#saveadmin_form').data('bootstrapValidator',null);
formValidator();
});
//form验证规则
functionformValidator(){
$('#saveadmin_form').bootstrapValidator({
message:'Thisvalueisnotvalid',
feedbackIcons:{
valid:'glyphiconglyphicon-ok',
invalid:'glyphiconglyphicon-remove',
validating:'glyphiconglyphicon-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校验、校验清除重置的实现代码(推荐)，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对毛票票网站的支持！