jQuery开源组件BootstrapValidator使用详解

作者:ca88

1.引入css与js

一、前言

本文实例为我们享用了BootstrapValidator使用办法,供我们参谋,具体内容如下

因为项目要求多少印证,看bootstrapValidator 还不易,就上手一贯,完美包容,话相当少说。

  bootstrapValidator.min.css

BootstrapValidator是依据bootstrap3的jquery表单验证插件,是最适合bootstrap框架的表单验证插件,在工作中用到此框架就写下团结在动用中积淀的一对感受

github:

bootstrap:能够扩张包容性的庞大框架.

  bootstrapValidator.min.js

二、难题陈述

参照他事他说加以考查博客:JS组件类别——Form表单验证神器: BootstrapValidator

需求引用css:

2.html中的modal代码

当按键的品类为submit时,使用bootstrapValidator的isValid()能够使验证表单平常专门的学业,但当button的type类型为button时,只调用bootstrapValidator的isValid()方法不可能不荒谬干活。那时候就须求选用bootstrapValidator的validate()方法开始展览激活。

参照博客:bootstrapvalidator之API学习

bootstrap.min.css

<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> 关闭
</button>
</div>
</form>
</div>
</div>
</div>
</div>

三、项目代码

表单HTML,如下:

bootstrapValidator.min.css

3.js代码

1、JSP中

<form role="form" id="roleForm">
 <div class="box-body">
 <div class="form-group">
 <input type="text" class="form-control" id="inputRoleName"
  name="roleName" placeholder="角色名称" />
  </div>
 <div class="form-group">
  <input type="text" class="form-control" id="inputRoleDescribe"
  name="roleDescribe" placeholder="角色描述" />
  </div>
  <div class="form-group">
  <select class="form-control select2" style="width: 100%;"
  id="selectRoleType">
  </select>
  </div>
  <div class="form-group">
  <select class="form-control select2" style="width: 100%;"
  id="selectUseFlag">
  <option selected="selected" value='Y'>可用</option>
  <option value='N'>不可用</option>
  </select>
  </div>
  <div class="form-group">
  <input type="text" class="form-control" id="inputDisplaySn"
  name="displaySn" placeholder="显示序号" />
  </div>
  </div>
 </form>

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验证销毁重构
$('#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'
}
}
},
}
});
}
<div id="addAdminDialog" class="modal fade" tabindex="-1"> 
<div class="modal-dialog cy-modal-dialog-f"> 
<div class="modal-content"> 
<div class="modal-header"> 
<button class="close" data-dismiss="modal">×</button> 
<h4 class="modal-title" id="myLargeModalLabel">新增管理员</h4> 
</div> 
<div class="modal-body"> 
<form id="addAdminForm" method="post" action="${ctx}/admin/operator/add.htm" class="form-horizontal"> 
<div class="form-group"> 
<label class="form-label text-bold" for="">登录名</label> 
<input class="form-control" placeholder="" type="text" name="loginName" id="addLoginName"/> 
</div> 
<div class="form-group"> 
<label class="form-label text-bold" for="">用户名</label> 
<input class="form-control" placeholder="" type="text" name="userName" id="addUserName" /> 
</div> 
<div class="form-group"> 
<label class="form-label text-bold" for="">密码</label> 
<input class="form-control" placeholder="" type="password" name="password" id="addPassword" /> 
</div> 
<div class="form-group"> 
<label class="form-label text-bold" for="">角色</label> 
<div class="form-group"> 
<div class="col-md-10 col-xs-10"> 
<div class="checkbox cy-nopadding" id="addRoles"> 
<c:forEach var="role" items="${roles}"> 
<label name="addRoleLabel" class="form-checkbox form-icon form-text"><input type="checkbox" id="addRole_${role.id}" name="roles" value="${role.id}"> ${role.roleName}</label> 
</c:forEach> 
</div> 
</div> 
</div> 
</div> 
</form> 
</div> 
<!--Modal footer--> 
<div class="modal-footer"> 
<button class="btn btn-primary" onclick="addAdmin();">确定</button> 
<button data-dismiss="modal" class="btn btn-default" type="button">取消</button> 
</div> 
</div> 
</div> 
</div> 

js代码如下:

jquery-1.10.2.min.js

如上所述是作者给大家介绍的Bootstrapvalidator校验、校验清除重新恢复设置的完成代码(推荐),希望对我们持有扶助,要是我们有别的疑问请给自家留言,作者会及时回复大家的。在此也特别多谢我们对台本之家网址的匡助!

2、JS

 function initForm(){
 $('#roleForm').bootstrapValidator({
 fields : {
 roleName : {
  validators : {
  notEmpty : {
  message : '角色名称不能为空'
  },
  stringLength : {
  min : 1,
  max : 16,
  message : '角色名称长度必须在1到16位之间'
  },
  regexp : {
  regexp : /^[^&@#/"']*$/,
  message : '角色名称不能包含&@#/"'等字符'
  }
  }
 },
 roleDescribe : {
  validators : {
  notEmpty : {
  message : '角色描述不能为空'
  },
  stringLength : {
  min : 1,
  max : 64,
  message : '角色描述长度必须在1到64位之间'
  },
  regexp : {
  regexp : /^[^&@#/"']*$/,
  message : '角色名称不能包含&@#/"'等字符'
  }
  }
 }
 }
 });
 }

bootstrap.min.js

您也许感兴趣的小说:

  • JS组件Form表单验证神器BootstrapValidator
  • 听说jQuery 达成bootstrapValidator下的大局验证
  • 实用又美好的BootstrapValidator表单验证插件
  • BootstrapValidator超详细教程(推荐)
  • Bootstrap中的表单验证插件bootstrapValidator使用方法整理(推荐)
  • jquery插件bootstrapValidator数据证实详解
  • jquery插件bootstrapValidator表单验证详解
  • BootstrapValidator不触发校验的完结代码
  • bootstrapValidator bootstrap-select验证不可用的解决办法
  • bootstrapvalidator之API学习课程
var faIcon = { 
valid: 'glyphicon glyphicon-ok', 
invalid: 'glyphicon glyphicon-remove', 
validating: 'glyphicon glyphicon-refresh' 
} 
//新增管理员前台校验 
$("#addAdminForm").bootstrapValidator({ 
message: 'This value is not valid', 
//反馈图标 
feedbackIcons:faIcon, 
fields: { 
loginName:{ 
message:'登录名无效', 
validators:{ 
notEmpty:{ 
message:'登录名不能为空' 
}, 
StringLength:{ 
min:5, 
max:30, 
message:'用户名长度大于6位并且小于30位' 
}, 
regexp:{ 
regexp:/^[a-zA-Z0-9_] $/, 
message:'用户名只能由字母、数字和下划线' 
} 
} 
}, 
userName: { 
message: '用户名格式不正确', 
validators: { 
notEmpty: { 
message: '用户名不能为空' 
}, 
stringLength: { 
min: 6, 
max: 30, 
message: '用户名长度大于6位并且小于30位' 
}, 
regexp: { 
regexp: /^[a-zA-Z0-9_] $/, 
message: '用户名只能由字母、数字和下划线' 
} 
} 
}, 
password: { 
validators: { 
notEmpty: { 
message: '邮箱不能为空' 
}, 
emailAddress: { 
message: '输入的不是一个有效的电子邮件地址' 
} 
} 
} 
} 
}); 

// 新增操作员 
function addAdmin() { 
/*手动验证表单,当是普通按钮时。*/ 
$('#addAdminForm').data('bootstrapValidator').validate(); 
if(!$('#addAdminForm').data('bootstrapValidator').isValid()){ 
return ; 
} 
$("#addAdminForm").ajaxSubmit({ 
dataType : 'json', 
type : "post", 
success : function(json) { 
if (json.status == "succ") { 
doQuery(); 
Modal.alert({ 
msg : "操作成功" 
}); 
$("#addAdminDialog").modal('hide'); 
} else { 
Modal.alert({ 
msg : json.msg 
}); 
} 
}, 
error : function() { 
Modal.alert({ 
msg : "操作失败" 
}); 
} 
}); 
} 

保留前验证代码如下:

bootstrapValidator.min.js

本文由ca88发布,转载请注明来源

关键词: ca88网址