bootstrap 组件学习之bootstrap validator
1.项目目录
1. 源码和api地址
bootstrapvalidator源码:https://github.com/nghuuphuoc/bootstrapvalidator
boostrapvalidator api:http://bv.doc.javake.cn/api/
2. 引入js插件
<link href="lib/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="lib/bootstrap/plus/validator/css/bootstrapValidator.min.css" />
<script src="lib/jquery-1.11.0.min.js"></script>
<script src="lib/bootstrap/js/bootstrap.min.js"></script>
<script src="lib/bootstrap/plus/validator/js/bootstrapValidator.js"></script>
<script src="lib/bootstrap/plus/validator/js/language/zh_CN.js"></script>
3. 简单使用
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>getClassmate</title>
<!-- Bootstrap -->
<link href="lib/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="lib/bootstrap/plus/validator/css/bootstrapValidator.min.css" />
<link rel="stylesheet" href="lib/bootstrap/css/shiftform.css"/>
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="//cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="//cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<div class="col-xs-12">
<div id="createModal" class="modal-dialog demo2do-modal-dialog">
<div class="modal-content">
<div class="modal-header beast-breadcrumb no-bottom-border clearfix">
<h2><i class="glyphicon glyphicon-fire" title=""></i> <span>添加权限</span></h2>
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<form class="form-horizontal" id="createForm" method="POST" action="base.html">
<div class="modal-body">
<div class="form-group demo2do-form-group">
<label class="col-xs-3 control-label">权限系统名</label>
<div class="col-xs-8">
<input type="text" class="form-control" id="privilegeName" name="privilegeName"/>
</div>
</div>
<div class="form-group demo2do-form-group">
<label class="col-xs-3 control-label">权限中文名</label>
<div class="col-xs-8">
<input type="text" class="form-control" id="create_Name" name="privilegeCnName" />
</div>
</div>
<div class="form-group demo2do-form-group">
<label class="col-xs-3 control-label">URI</label>
<div class="col-xs-8">
<input type="text" class="form-control" id="uri" name="uri" />
</div>
</div>
<div class="form-group demo2do-form-group">
<label class="col-xs-3 control-label">排序索引号</label>
<div class="col-xs-8">
<input type="text" class="form-control" id="sortIndex" name="sortIndex" />
</div>
</div>
<div class="form-group demo2do-form-group">
<label class="col-xs-3 control-label">权限分类</label>
<div class="col-xs-8" id="moduleParentDiv">
<select id="level" name="moduleId" class="form-control select2">
<option></option>
<option value="1">普通权限</option>
<option value="2">菜单</option>
<option value="3">模块</option>
</select>
</div>
</div>
<div class="form-group demo2do-form-group">
<label class="col-xs-3 control-label">是否默认选中</label>
<div class="col-xs-8">
<select id="isChecked" name="isChecked" class="form-control select2">
<option value="">否</option>
<option value="1">是</option>
</select>
</div>
</div>
<div class="form-group demo2do-form-group">
<label class="col-xs-3 control-label">上级权限</label>
<div class="col-xs-8">
<select id="parentPrivilegeId" name="parentPrivilegeId" class="form-control">
<option value="3620194" selected="selected">select2/select2</option>
</select>
</div>
</div>
</div>
<div class="modal-footer">
<button type="submit" class="btn btn-success btn-shadow btn-shadow-success demo2do-btn">添加</button>
<button type="button" class="btn btn-default btn-shadow btn-shadow-default demo2do-btn" data-dismiss="modal">取消</button>
</div>
</form>
</div>
</div>
</div>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="lib/jquery-1.11.0.min.js"></script>
<script src="lib/bootstrap/js/bootstrap.min.js"></script>
<script src="lib/bootstrap/plus/validator/js/bootstrapValidator.js"></script>
<script src="lib/bootstrap/plus/validator/js/language/zh_CN.js"></script>
<script src="lib/bootstrap/js/shiftform.js"></script>
<!-- <script type="text/javascript">
$(function () {
$('#isChecked').select2({
allowClear: true,
minumiumResultsForSearch: 1,
maximumSelectionLength: 5
});
});
</script>-->
<script type="text/javascript">
//验证规则
$('#createForm').bootstrapValidator({
message: 'This value is not valid',
feedbackIcons: {
valid: 'glyphicon glyphicon-ok',
invalid: 'glyphicon glyphicon-remove',
validating: 'glyphicon glyphicon-refresh'
},
fields: {
//表单name
privilegeName: {
//提示消息
message: '系统权限名验证失败',
//需要做的验证
validators: {
//验证项
notEmpty: {
message: '系统权限名不能为空'
},
stringCase: {
message: '系统权限名必须是大写',
'case': 'upper'
}
}
},
privilegeCnName: {
//提示消息
message: '权限中文名称验证失败',
//需要做的验证
validators: {
//验证项
notEmpty: {
message: '权限中文名称不能为空'
}
}
},
uri: {
//提示消息
message: '权限名称验证失败',
//需要做的验证
validators: {
//验证项
notEmpty: {
message: '权限路径不能为空'
}
}
},
level: {
//提示消息
message: '权限分类失败',
//需要做的验证
validators: {
//验证项
notEmpty: {
message: '权限分类不能为空'
}
}
},
sortIndex: {
validators: {
notEmpty: {
message: '排序不能为空'
},
numeric: {
message: '排序号必须是数字'
}
}
}
}
});
</script>
</body>
</html>
验证效果:
4. 自定义提交验证
js代码
<script type="text/javascript">
//验证规则
var vaildatorRule={
message: 'This value is not valid',
feedbackIcons: {
valid: 'glyphicon glyphicon-ok',
invalid: 'glyphicon glyphicon-remove',
validating: 'glyphicon glyphicon-refresh'
},
fields: {
//表单name
privilegeName: {
//提示消息
message: '系统权限名验证失败',
//需要做的验证
validators: {
//验证项
notEmpty: {
message: '系统权限名不能为空'
},
stringCase: {
message: '系统权限名必须是大写',
'case': 'upper'
}
}
},
privilegeCnName: {
//提示消息
message: '权限中文名称验证失败',
//需要做的验证
validators: {
//验证项
notEmpty: {
message: '权限中文名称不能为空'
}
}
},
uri: {
//提示消息
message: '权限名称验证失败',
//需要做的验证
validators: {
//验证项
notEmpty: {
message: '权限路径不能为空'
}
}
},
level: {
//提示消息
message: '权限分类失败',
//需要做的验证
validators: {
//验证项
notEmpty: {
message: '权限分类不能为空'
}
}
},
sortIndex: {
validators: {
notEmpty: {
message: '排序不能为空'
},
numeric: {
message: '排序号必须是数字'
}
}
}
}
};
// 关闭表单 submit 事件
$("#createForm").submit(function(ev){ev.preventDefault();});
$("#createForm").on("click", function(){
var result=true;
debugger
//初始化验证插件
$("#createForm").bootstrapValidator(vaildatorRule); //vaildatorRule 验证规则
//得到获取validator对象或实例
var bootstrapValidator = $("#createForm").data('bootstrapValidator');
// 执行表单验证
bootstrapValidator.validate();
//isValid() 返回验证结果
result=bootstrapValidator.isValid();
if(bootstrapValidator.isValid())
$("#createForm").submit();
else return;
});
</script>
5. 其他参考文章
1. Bootstrap datetimepicker 和 bootstrap validator 的结合使用 http://blog.aizhet.com/IT/16351.html
2. bootstrapvalidator之API学习 http://www.cnblogs.com/franson-2016/p/5842012.html
3. Bootstrap validator 自定义验证码校验 http://www.my80s.net/post/290.html
4. 使用bootstrapvalidator的远程验证 http://www.cnblogs.com/franson-2016/p/5613696.html
5. 默认的验证规则 : http://bv.doc.javake.cn/validators/