1.引入css与js
bootstrapValidator.min.css
bootstrapValidator.min.js
2.html中的modal代码
- 管理员名
- 密码
- 确认密码
- 显示名
- 邮箱
- 备注
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&#63;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验证规则 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校验、校验清除重置的实现代码(推荐),希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对网站的支持!